diff --git a/public/images/homeWu/Pending.png b/public/images/homeWu/Pending.png
new file mode 100644
index 00000000..27d97faf
Binary files /dev/null and b/public/images/homeWu/Pending.png differ
diff --git a/public/images/homeWu/agency.png b/public/images/homeWu/agency.png
index 10b3865e..6ce31d54 100644
Binary files a/public/images/homeWu/agency.png and b/public/images/homeWu/agency.png differ
diff --git a/public/images/homeWu/personal-bgimg.png b/public/images/homeWu/personal-bgimg.png
new file mode 100644
index 00000000..ec836495
Binary files /dev/null and b/public/images/homeWu/personal-bgimg.png differ
diff --git a/src/api/system/organiza.js b/src/api/system/organiza.js
index 67bf0541..0934f54d 100644
--- a/src/api/system/organiza.js
+++ b/src/api/system/organiza.js
@@ -21,8 +21,14 @@ const treeList = function (query) {
 const listByParent = function (parentId) {
     return ajax.get('/xboe/org/list-by-parent?parentId='+parentId);
 }
-export default {
-    treeList,
-    listByParent
+
+const getSimple = function (id) {
+    return ajax.get('/xboe/org/simple?id='+id);
+}
+
+export default {
+    treeList,
+    listByParent,
+    getSimple
 }
 
diff --git a/src/assets/logo/logo-white.png b/src/assets/logo/logo-white.png
new file mode 100644
index 00000000..aa37821f
Binary files /dev/null and b/src/assets/logo/logo-white.png differ
diff --git a/src/assets/styles/ellipsis.scss b/src/assets/styles/ellipsis.scss
index d27f1fb8..e5f1dd3d 100644
--- a/src/assets/styles/ellipsis.scss
+++ b/src/assets/styles/ellipsis.scss
@@ -18,7 +18,7 @@
   overflow: hidden;
   text-overflow:ellipsis;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp:2;
 }
 .index-one-line-ellipsis{
   display: -webkit-box;
diff --git a/src/assets/styles/portal-index.scss b/src/assets/styles/portal-index.scss
index c0091a57..820b4522 100644
--- a/src/assets/styles/portal-index.scss
+++ b/src/assets/styles/portal-index.scss
@@ -3,11 +3,10 @@
 //首页版心内容区域
 .xindex-content {
   font-family: 'Noto Sans SC';
+  padding-top: 20px;
   margin: 26px auto;
 }
-.xindex-row{
-  display: inline-block;
-}
+
 // 课程卡片
 .xindex-course{
     display: inline-block;
@@ -20,7 +19,7 @@
     box-sizing: border-box;
     position: relative;
     background-color: #ffffff;
-
+    border-radius: 8px;
     .cor-praises {
       position: absolute;
       right: 50px;
@@ -93,19 +92,6 @@
         }
       }
     }
-
-    // .cor-icon {
-    //   position: absolute;
-    //   left: 100px;
-    //   top: 54px;
-    //   border-radius: 50%;
-    //   background: rgba(88, 138, 252, 0.37);
-
-    //   .el-icon-caret-right {
-    //     font-size: 36px;
-    //     color: #588afc;
-    //   }
-    // }
     .course-title {
         margin: 16px 0 16px 0;
         height: 44px;
@@ -155,92 +141,89 @@
         }
       }
     }
-    .course-score-no {
-      text-align: right;
-      font-size: 14px;
-      color: #6B7C85;
-      line-height: 30px;
-      -moz-user-select: none; /*火狐*/
-      -webkit-user-select: none; /*webkit浏览器*/
-      -ms-user-select: none; /*IE10*/
-      -khtml-user-select: none; /*早期浏览器*/
-      user-select: none;
-    }
-    .course-score-value {
-      font-size: 14px;
-      //  margin-top: 5px;
-      margin-left: 32px;
-      line-height: 30px;
-      color: #FA6400;
-      font-family: 'Arial';
-      -moz-user-select: none; /*火狐*/
-      -webkit-user-select: none; /*webkit浏览器*/
-      -ms-user-select: none; /*IE10*/
-      -khtml-user-select: none; /*早期浏览器*/
-      user-select: none;
-      // font-size: 30px;
-    }
-    .cardmark {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(101, 101, 101, 0.8);
-      pointer-events: none;
-      border-radius: 5px;
-      padding: 10px;
-      opacity: 0;
-      -webkit-transition: all 1.5s;
-      -moz-transition: all 1.5s;
-      -ms-transition: all 1.5s;
-      -o-transition: all 1.5s;
-      transition: all 1.5s;
-      .cardmark-name {
-        font-size: 18px;
-        line-height: 30px;
-        font-weight: 600;
-        color: #fff;
-      }
-      .cardmark-info {
-        color: #fff;
-        font-size: 14px;
-        line-height: 20px;
-      }
+.course-score-no {
+  text-align: right;
+  font-size: 14px;
+  color: #6B7C85;
+  line-height: 30px;
+  -moz-user-select: none; /*火狐*/
+  -webkit-user-select: none; /*webkit浏览器*/
+  -ms-user-select: none; /*IE10*/
+  -khtml-user-select: none; /*早期浏览器*/
+  user-select: none;
+}
+.course-score-value {
+  font-size: 14px;
+  //  margin-top: 5px;
+  margin-left: 32px;
+  line-height: 30px;
+  color: #FA6400;
+  font-family: 'Arial';
+  -moz-user-select: none; /*火狐*/
+  -webkit-user-select: none; /*webkit浏览器*/
+  -ms-user-select: none; /*IE10*/
+  -khtml-user-select: none; /*早期浏览器*/
+  user-select: none;
+  // font-size: 30px;
+}
+//以下是几种右边排行内容，因为高度需要变化不同，所以需要单独宝义
+.xindex-ranking-li{
+  cursor: pointer;
+  line-height: 30px;
+  display: flex;
+  position: relative;
+  .span {
+    display: flex;
   }
-
-.xindex-course:hover .cardmark {
-  opacity: 1;
+}
+.xindex-ranking-li:hover .list-active {
+  // transition: all 0.5s;
+  display: block;
+}
+
+
+
+
+.xindex-ranking-course{
+  margin: 0px;
+  padding: 0px;
+  //overflow-y: auto;
+}
+
+.xindex-ranking-case{
+  //height: 114px;
+  margin: 0px;
+  padding: 0px;
+  overflow-y: auto;
+}
+
+.xindex-ranking-article{
+  margin: 0px;
+  padding: 0px;
+  overflow-y: auto;
+}
+
+.xindex-ranking-qa{
+  margin: 0px;
+  padding: 0px;
+  overflow-y: auto;
+}
+
+//每块区域
+.xindex-case {
+  display: inline-block;
+  vertical-align: top;
+  width: 33.33%;
+  padding-right: 20px;
+}
+
+.xindex-qa {
+  display: inline-block;
+  vertical-align: top;
+  width: 25%;
+  padding-right: 20px;
 }
 
-.xindex-ranking{
-  min-width: 300px;
-  border-radius: 8px;
-  padding: 30px;
-  .xindex-ranking-title{
-    font-size: 24px;
-    font-family: FZLTCHJW--GB1-0, FZLTCHJW--GB1;
-    font-weight: 600;
-    color: #000000;
-    line-height: 28px;
-  }
-      .course-index-list{
-          height: 410px;
-          overflow-y: auto;
-      }
-      .case-index-list{
-          height: 114px;
-          overflow-y: auto;
-      }
-      .anking-index-list{
-          height: 320px;
-          overflow-y: auto;
-      }
-      .qa-index-qa{
-          height: 64px;
-          overflow-y: auto;
-      }
-  }
 .nav-bottbor{
     width: 75%;
     height: 4px;
@@ -249,17 +232,17 @@
     position: absolute;
     top: 75%;
     left: 13%;
-  }
-  .current-nav {
-    color: #387DF7;
-    font-weight: 700;
-    >a{
-      color:#387DF7;
+}
+.current-nav {
+  color: #387DF7;
+  font-weight: 700;
+  >a{
+    color:#387DF7;
 
-    }
-    // background: #588afc;
-    // border-bottom: 4px solid;
   }
+  // background: #588afc;
+  // border-bottom: 4px solid;
+}
 .portal-right-text{
     font-size: 24px;
     font-family: JCHEadA;
@@ -355,22 +338,21 @@
 .pink-three{
     color: #EE4685;
 }
-.list-bg{
-    background: url('/images/qa-box.png') no-repeat 100% / 100%;
-    // background: linear-gradient(180deg, #C3DEF8 0%, #FFFFFF 37%);
-}
-.list-bg1{
-  background: url('/images/list-or.png') no-repeat 100% / 100%;
-}
-.list-bg2{
-  background: url('/images/list-pink.png') no-repeat 100% / 100%;
-}
-.art-bgimg{
-    background: url('/images/contribute.png') no-repeat 100% / 100%;
-    background-position:top;
-  }
+// .list-bg{
+//     background: url('/images/qa-box.png') no-repeat 100% / 100%;
+//     // background: linear-gradient(180deg, #C3DEF8 0%, #FFFFFF 37%);
+// }
+// .list-bg1{
+//   background: url('/images/list-or.png') no-repeat 100% / 100%;
+// }
+// .list-bg2{
+//   background: url('/images/list-pink.png') no-repeat 100% / 100%;
+// }
+// .art-bgimg{
+//     background: url('/images/contribute.png') no-repeat top left;
+//     background-size: cover;
+//   }
 .portal-images-title{
-  display: inline-block;
   vertical-align: top;
   padding: 2px 12px;
   line-height: 24px;
@@ -458,10 +440,21 @@
 @media screen and (max-width: 1366px){
   .xindex-content{
     width: 1100px;
+  }
+  .personal-panel{
+    width: 300px;
+    height: 320px;
+    padding: 25px 40px;
+    .personal-box {
+      margin-left: 0px;
+      margin-top: 0px;
+      margin-bottom: 0px;
+  }
+  
   }
   //课程卡片样式
   .xindex-course{
-    width: 240px;
+    width: 255px;
     padding: 20px;
     margin-right: 20px;
     margin-bottom: 20px;
@@ -470,53 +463,64 @@
       bottom: 16px;
     }
     .course-image-box{
-     width: 200px;
-     height: 114px;
+     width: 220px;
+     height: 123px;
       ::v-deep .course-image{
         height: 100% !important;
       }
     }
   }
-  .xindex-ranking{
-    width: 300px;
+  .xindex-ranking-li{
+    margin-top:15px;
   }
-    .boe-index{
-       width: 235px;
-       padding: 20px;
-       margin-right: 20px;
-       margin-bottom: 20px;
-       .course-image-box{
-        width: 200px;
-        height: 114px;
-            ::v-deep .course-image{
-                height: 100% !important;
-            }
+  .xindex-ranking-course{
+    height: 450px;
+  }
+
+  .xindex-ranking-case{
+    height: 170px;
+  }
+
+  .xindex-ranking-article{
+    height: 375px;
+  }
+
+  .xindex-ranking-qa{
+    height:124px;
+  }
+
+  .xindex-case {
+    padding-right: 20px;
+  }
+    // .boe-index{
+    //    width: 235px;
+    //    padding: 20px;
+    //    margin-right: 20px;
+    //    margin-bottom: 20px;
+    //    .course-image-box{
+    //     width: 200px;
+    //     height: 114px;
+    //         ::v-deep .course-image{
+    //             height: 100% !important;
+    //         }
+    //    }
+
+    // }
+  .case-inter{
+    left: 20px;
+    bottom:20px;
+    .interact-bar-index{
+        display: none !important;
        }
-    //     .course-image-box :hover .el-image{
-    //     z-index: 999;
-    //     position: absolute;
-    //     top: 0px;
-    //     left: 0px;
-    //     width: 195px !important;
-    //     height: 92px !important;
-    //   }
+    ::v-deep .el-avatar--small{
+       width: 22px;
+       height: 22px;
     }
-    .case-inter{
-        left: 20px;
-        bottom:20px;
-        .interact-bar-index{
-            display: none !important;
-           }
-        ::v-deep .el-avatar--small{
-           width: 22px;
-           height: 22px;
-        }
-      }
-      .modules-list{
-        margin-right: 20px;
-      }
+  }
+  .modules-list{
+    margin-right: 20px;
+  }
  .boe-case-index{
-    width: 235px;
     height: 246px;
     margin-right: 20px;
     .case-top{
@@ -548,7 +552,6 @@
     }
  }
  .boe-qa-index{
-    width: 171px;
     height: 194px;
     margin-right: 20px;
     padding: 17px 12px 16px 12px;
@@ -676,9 +679,19 @@
 @media screen and (max-width: 1680px) and (min-width:1367px){
   .xindex-content{
     width: 1366px;
+  }
+   .personal-panel{
+    width: 356px; 
+    height: 370px;
+    padding: 30px 45px;
+    .personal-box{
+        // margin-left: 16px;
+        margin-top: 20px;
+        margin-bottom: 28px;
+    }
   }
   .xindex-course{
-    width: 330px;
+    width: 320px;
     padding: 25px;
     margin-right: 20px;
     margin-bottom: 20px;
@@ -694,56 +707,46 @@
       }
     }
   }
-    .portal-right-box{
-        width: 344px;
-        .course-index-list{
-            height: 548px;
-            overflow-y: auto;
-        }
-        .case-index-list{
-            height: 230px;
-            overflow-y: auto;
-        }
-        .anking-index-list{
-            height: 448px;
-            overflow-y: auto;
-        }
-        .qa-index-qa{
-            height: 145px;
-            overflow-y: auto;
-        }
+
+  .xindex-ranking-li{
+    margin-top:20px;
+  }
+  .xindex-ranking-course{
+    height: 535px;
+  }
+
+  .xindex-ranking-case{
+    height: 260px;
+  }
+
+  .xindex-ranking-article{
+    height: 445px;
+  }
+
+  .xindex-ranking-qa{
+    height:175px;
+  }
+
+  .xindex-case {
+    padding-right: 20px;
+  }
+
+  .case-inter{
+      left: 20px;
+      bottom:20px;
+      // .interact-bar-index{
+      //     display: none !important;
+      //    }
+      ::v-deep .el-avatar--small{
+       width: 32px;
+       height: 32px;
     }
-    .boe-index{
-       width: 350px;
-       padding: 25px;
-       margin-right: 20px;
-       margin-bottom: 20px;
-       .course-image-box{
-        width: 300px;
-        height: 170px;
-            ::v-deep .course-image{
-                height: 100% !important;
-            }
-       }
-    }
-    .case-inter{
-        left: 20px;
-        bottom:20px;
-        // .interact-bar-index{
-        //     display: none !important;
-        //    }
-        ::v-deep .el-avatar--small{
-         width: 32px;
-         height: 32px;
-      }
-      }
-      .modules-list{
-        margin-right: 30px;
-      }
+  }
+  .modules-list{
+    margin-right: 10px;
+  }
  .boe-case-index{
-    width: 350px;
     height: 361px;
-    margin-right: 36px;
     .case-top{
         height: 69px;
     }
@@ -775,7 +778,7 @@
     }
  }
  .boe-qa-index{
-    width: 254px;
+
     height: 276px;
     margin-right: 36px;
     padding: 30px;
@@ -895,60 +898,58 @@
 
 @media screen and (max-width: 1920px) and (min-width: 1681px){
   .xindex-content{
-    width: 1640px;
+      width: 1690px;
+  }
+  .personal-panel{
+    width: 356px; 
+    height: 370px;
+    padding: 30px 45px;
+    .personal-box{
+        margin-top: 20px;
+        margin-bottom: 28px;
+    }
   }
   .xindex-course{
-    width: 410px;
-    padding: 30px;
-    margin-right: 36px;
-    margin-bottom: 36px;
-    border-radius: 8px;
-    .cor-praises {
-      right: 50px;
-      bottom: 26px;
-    }
-    .course-image-box{
-     width: 350px;
-     height: 196x;
-         ::v-deep .course-image{
-             height: 100% !important;
-         }
-    }
+      width: 400px;
+      padding: 30px;
+      margin-right: 30px;
+      margin-bottom: 30px;
+      border-radius: 8px;
+      .cor-praises {
+        right: 50px;
+        bottom: 26px;
+      }
+      .course-image-box{
+       width: 340px;
+       height: 191x;
+           ::v-deep .course-image{
+               height: 100% !important;
+           }
+      }
+  }
+  .xindex-ranking-li{
+    margin-top:30px;
+  }
+  .xindex-ranking-course{
+    height: 646px;
   }
 
-    .portal-right-box{
-      width: 410px;
-      .course-index-list{
-          height: 548px;
-          overflow-y: auto;
-      }
-      .case-index-list{
-          height: 262px;
-          overflow-y: auto;
-      }
-      .anking-index-list{
-          height: 425px;
-          overflow-y: auto;
-      }
-      .qa-index-qa{
-          height: 188px;
-          overflow-y: auto;
-      }
+  .xindex-ranking-case{
+    height: 300px;
   }
-  .boe-index{
-     width: 410px;
-     padding: 30px;
-     margin-right: 36px;
-     margin-bottom: 36px;
-     border-radius: 8px;
-     .course-image-box{
-      width: 350px;
-      height: 196x;
-          ::v-deep .course-image{
-              height: 100% !important;
-          }
-     }
+
+  .xindex-ranking-article{
+    height: 455px;
   }
+
+  .xindex-ranking-qa{
+    height:220px;
+  }
+
+  .xindex-case {
+    padding-right: 30px;
+  }
+
   .case-inter{
       left: 20px;
       bottom:20px;
@@ -959,166 +960,164 @@
        width: 32px;
        height: 32px;
     }
-    }
-    .modules-list{
-      margin-right: 36px;
-    }
-.boe-case-index{
-  width: 410px;
-  height: 396px;
-  margin-right: 36px;
-  .case-top{
-      height: 120px;
   }
-  .case-conent{
-     width: 350px;
-     height: 274px;
-     top:30px;
-     left:30px;
-     padding: 30px;
-     .time-one{
-      padding:3px 10px;
-     }
-     .cast-time{
-      margin-bottom: 14px;
-     }
-     .case-title{
-      font-size: 16px;
-      height: 48px;
-      line-height: 24px;
-      margin-top: 20px;
-     }
-     .case-text{
-       height: 60px;
-       font-size: 14px;
-       line-height: 20px;
-       margin-bottom: 30px;
-     }
-
+  .modules-list{
+    margin-right: 36px;
   }
-}
-.boe-qa-index{
-  width: 298px;
-  height: 320px;
-  margin-right: 36px;
-  padding: 30px;
-  .qa-center{
-     height: 152px;
-     margin-top: 10px;
-     padding: 20px;
-     .portal-index-title{
-      font-weight: 600;
-      margin-bottom: 6px;
-     }
-     .boe-qa-sum{
-      font-size: 14px;
-      line-height: 22px;
-      margin-top: 4px;
-     }
-     .qa-views{
-      left: 20px;
-      bottom: 20px;
-     }
-  }
-  .qa-char{
-      margin-top: 20px;
-      display: flex;
-      ::v-deep img{
-        width: 34px;
-        height: 34px;
-      }
-      .info-name{
-        font-size: 12px;
-        color: #6E7B84;
-        margin-left: 10px;
-      }
+  .boe-case-index{
+    height: 396px;
+    .case-top{
+        height: 120px;
     }
-  .qa-top{
-      display: flex;
-      justify-content: space-between;
-      & span:first-child{
-        background: rgba($color: #387DF7, $alpha: 0.05);
-        padding: 3px 10px;
-        border-radius: 4px;
-        font-size: 12px;
-        color: #387DF7;
-      }
-      span{
-        font-size: 14px;
-        color: #6E7B84;
-      }
-    }
-}
-.boe-article-index{
-  padding: 30px;
-  .article-card-left{
-      width: 352px;
-      .article-info-index-summary{
-          font-size: 14px;
-          font-weight: 400;
-          color: #6E7B84;
-          line-height: 20px;
-      }
-      .article-info-image-box{
-          width: 352px;
-          height: 196px;
-
-      }
-      .el-avatar{
-          width: 32px !important;
-          height: 32px !important;
+    .case-conent{
+       width: 350px;
+       height: 274px;
+       top:30px;
+       left:30px;
+       padding: 30px;
+       .time-one{
+        padding:3px 10px;
        }
-  }
-  .article-card-right{
-      .article-li{
-          // height: 160px;
-          display: flex;
-          width: 100%;
-          .article-img{
-            flex: 43%;
-            width: 252px;
-            height: 144px;
-            border-radius: 4px;
-            margin-right: 10px;
-            img{
-              width: 252px;
-              height: 144px;
-              border-radius: 4px;
-            }
-          }
-          .article-right{
-            flex: 100%;
-            .article-info-title{
-              font-size: 16px;
-              font-weight: 600;
-              color: #00253E;
-              margin-bottom: 12px;
-              margin-top: 10px;
-              // width: 50%;
-            }
-            .article-info-summary{
+       .cast-time{
+        margin-bottom: 14px;
+       }
+       .case-title{
+        font-size: 16px;
+        height: 48px;
+        line-height: 24px;
+        margin-top: 20px;
+       }
+       .case-text{
+         height: 60px;
+         font-size: 14px;
+         line-height: 20px;
+         margin-bottom: 30px;
+       }
+
+    }
+}
+    .boe-qa-index{
+
+        height: 320px;
+        margin-right: 36px;
+        padding: 30px;
+      .qa-center{
+         height: 152px;
+         margin-top: 10px;
+         padding: 20px;
+         .portal-index-title{
+          font-weight: 600;
+          margin-bottom: 6px;
+         }
+         .boe-qa-sum{
+          font-size: 14px;
+          line-height: 22px;
+          margin-top: 4px;
+         }
+         .qa-views{
+          left: 20px;
+          bottom: 20px;
+         }
+      }
+      .qa-char{
+        margin-top: 20px;
+        display: flex;
+        ::v-deep img{
+          width: 34px;
+          height: 34px;
+        }
+        .info-name{
+          font-size: 12px;
+          color: #6E7B84;
+          margin-left: 10px;
+        }
+      }
+      .qa-top{
+        display: flex;
+        justify-content: space-between;
+        & span:first-child{
+          background: rgba($color: #387DF7, $alpha: 0.05);
+          padding: 3px 10px;
+          border-radius: 4px;
+          font-size: 12px;
+          color: #387DF7;
+        }
+        span{
+          font-size: 14px;
+          color: #6E7B84;
+        }
+      }
+    }
+    .boe-article-index{
+      padding: 30px;
+      .article-card-left{
+          width: 352px;
+          .article-info-index-summary{
               font-size: 14px;
               font-weight: 400;
               color: #6E7B84;
-              // margin-bottom: 15px;
-            }
-            .article-bottom{
-              display: flex;
-              justify-content: space-between;
-             ::v-deep .uavatar{
-                width:34px;
-                height: 34px;
-              }
-              .el-avatar{
-                  width: 34px;
-                  height: 34px;
-              }
-            }
+              line-height: 20px;
           }
+          .article-info-image-box{
+              width: 352px;
+              height: 196px;
 
-        }
-  }
-}
+          }
+          .el-avatar{
+              width: 32px !important;
+              height: 32px !important;
+           }
+      }
+      .article-card-right{
+        .article-li{
+            // height: 160px;
+            display: flex;
+            width: 100%;
+            .article-img{
+              flex: 43%;
+              width: 252px;
+              height: 144px;
+              border-radius: 4px;
+              margin-right: 10px;
+              img{
+                width: 252px;
+                height: 144px;
+                border-radius: 4px;
+              }
+            }
+            .article-right{
+              flex: 100%;
+              .article-info-title{
+                font-size: 16px;
+                font-weight: 600;
+                color: #00253E;
+                margin-bottom: 12px;
+                margin-top: 10px;
+                // width: 50%;
+              }
+              .article-info-summary{
+                font-size: 14px;
+                font-weight: 400;
+                color: #6E7B84;
+                // margin-bottom: 15px;
+              }
+              .article-bottom{
+                display: flex;
+                justify-content: space-between;
+               ::v-deep .uavatar{
+                  width:34px;
+                  height: 34px;
+                }
+                .el-avatar{
+                    width: 34px;
+                    height: 34px;
+                }
+              }
+            }
+
+          }
+      }
+    }
   }
 
 @media screen and (min-width: 1921px){
@@ -1144,39 +1143,28 @@
     }
   }
 
-    .portal-right-box{
-      width: 410px;
-      .course-index-list{
-          height: 548px;
-          overflow-y: auto;
-      }
-      .case-index-list{
-          height: 262px;
-          overflow-y: auto;
-      }
-      .anking-index-list{
-          height: 425px;
-          overflow-y: auto;
-      }
-      .qa-index-qa{
-          height: 188px;
-          overflow-y: auto;
-      }
+  .xindex-ranking-li{
+    margin-top:30px;
   }
-  .boe-index{
-     width: 410px;
-     padding: 30px;
-     margin-right: 36px;
-     margin-bottom: 36px;
-     border-radius: 8px;
-     .course-image-box{
-      width: 350px;
-      height: 196x;
-          ::v-deep .course-image{
-              height: 100% !important;
-          }
-     }
+  .xindex-ranking-course{
+    height: 610px;
   }
+
+  .xindex-ranking-case{
+    height: 260px;
+  }
+
+  .xindex-ranking-article{
+    height: 420px;
+  }
+
+  .xindex-ranking-qa{
+    height:188px;
+  }
+  .xindex-case {
+    padding-right: 30px;
+  }
+
   .case-inter{
       left: 20px;
       bottom:20px;
@@ -1187,18 +1175,16 @@
        width: 32px;
        height: 32px;
     }
-    }
-    .modules-list{
-      margin-right: 36px;
-    }
-.boe-case-index{
-  width: 410px;
-  height: 396px;
-  margin-right: 36px;
-  .case-top{
-      height: 120px;
   }
-  .case-conent{
+  .modules-list{
+    margin-right: 36px;
+  }
+  .boe-case-index{
+    height: 396px;
+    .case-top{
+        height: 120px;
+    }
+    .case-conent{
      width: 350px;
      height: 274px;
      top:30px;
@@ -1210,141 +1196,141 @@
      .cast-time{
       margin-bottom: 14px;
      }
-     .case-title{
-      font-size: 16px;
-      height: 48px;
-      line-height: 24px;
-      margin-top: 20px;
-     }
-     .case-text{
+       .case-title{
+          font-size: 16px;
+          height: 48px;
+          line-height: 24px;
+          margin-top: 20px;
+       }
+      .case-text{
        height: 60px;
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 30px;
-     }
+      }
 
-  }
-}
-.boe-qa-index{
-  width: 298px;
-  height: 320px;
-  margin-right: 36px;
-  padding: 30px;
-  .qa-center{
-     height: 152px;
-     margin-top: 10px;
-     padding: 20px;
-     .portal-index-title{
-      font-weight: 600;
-      margin-bottom: 6px;
-     }
-     .boe-qa-sum{
-      font-size: 14px;
-      line-height: 22px;
-      margin-top: 4px;
-     }
-     .qa-views{
-      left: 20px;
-      bottom: 20px;
-     }
-  }
-  .qa-char{
-      margin-top: 20px;
-      display: flex;
-      ::v-deep img{
-        width: 34px;
-        height: 34px;
-      }
-      .info-name{
-        font-size: 12px;
-        color: #6E7B84;
-        margin-left: 10px;
-      }
     }
-  .qa-top{
-      display: flex;
-      justify-content: space-between;
-      & span:first-child{
-        background: rgba($color: #387DF7, $alpha: 0.05);
-        padding: 3px 10px;
-        border-radius: 4px;
-        font-size: 12px;
-        color: #387DF7;
-      }
-      span{
-        font-size: 14px;
-        color: #6E7B84;
-      }
-    }
-}
-.boe-article-index{
-  padding: 30px;
-  .article-card-left{
-      width: 352px;
-      .article-info-index-summary{
-          font-size: 14px;
-          font-weight: 400;
-          color: #6E7B84;
-          line-height: 20px;
-      }
-      .article-info-image-box{
-          width: 352px;
-          height: 196px;
+  }
+  .boe-qa-index{
 
-      }
-      .el-avatar{
-          width: 32px !important;
-          height: 32px !important;
+    height: 320px;
+    margin-right: 36px;
+    padding: 30px;
+    .qa-center{
+       height: 152px;
+       margin-top: 10px;
+       padding: 20px;
+       .portal-index-title{
+        font-weight: 600;
+        margin-bottom: 6px;
        }
+       .boe-qa-sum{
+        font-size: 14px;
+        line-height: 22px;
+        margin-top: 4px;
+       }
+       .qa-views{
+        left: 20px;
+        bottom: 20px;
+       }
+    }
+    .qa-char{
+        margin-top: 20px;
+        display: flex;
+        ::v-deep img{
+          width: 34px;
+          height: 34px;
+        }
+        .info-name{
+          font-size: 12px;
+          color: #6E7B84;
+          margin-left: 10px;
+        }
+      }
+    .qa-top{
+        display: flex;
+        justify-content: space-between;
+        & span:first-child{
+          background: rgba($color: #387DF7, $alpha: 0.05);
+          padding: 3px 10px;
+          border-radius: 4px;
+          font-size: 12px;
+          color: #387DF7;
+        }
+        span{
+          font-size: 14px;
+          color: #6E7B84;
+        }
+      }
   }
-  .article-card-right{
-      .article-li{
-          // height: 160px;
-          display: flex;
-          width: 100%;
-          .article-img{
-            flex: 43%;
-            width: 252px;
-            height: 144px;
-            border-radius: 4px;
-            margin-right: 10px;
-            img{
-              width: 252px;
-              height: 144px;
-              border-radius: 4px;
-            }
-          }
-          .article-right{
-            flex: 100%;
-            .article-info-title{
-              font-size: 16px;
-              font-weight: 600;
-              color: #00253E;
-              margin-bottom: 12px;
-              margin-top: 10px;
-              // width: 50%;
-            }
-            .article-info-summary{
+  .boe-article-index{
+      padding: 30px;
+      .article-card-left{
+          width: 352px;
+          .article-info-index-summary{
               font-size: 14px;
               font-weight: 400;
               color: #6E7B84;
-              // margin-bottom: 15px;
-            }
-            .article-bottom{
-              display: flex;
-              justify-content: space-between;
-             ::v-deep .uavatar{
-                width:34px;
-                height: 34px;
-              }
-              .el-avatar{
-                  width: 34px;
-                  height: 34px;
-              }
-            }
+              line-height: 20px;
           }
+          .article-info-image-box{
+              width: 352px;
+              height: 196px;
 
-        }
-  }
-}
+          }
+          .el-avatar{
+              width: 32px !important;
+              height: 32px !important;
+           }
+      }
+      .article-card-right{
+          .article-li{
+              // height: 160px;
+              display: flex;
+              width: 100%;
+              .article-img{
+                flex: 43%;
+                width: 252px;
+                height: 144px;
+                border-radius: 4px;
+                margin-right: 10px;
+                img{
+                  width: 252px;
+                  height: 144px;
+                  border-radius: 4px;
+                }
+              }
+              .article-right{
+                flex: 100%;
+                .article-info-title{
+                  font-size: 16px;
+                  font-weight: 600;
+                  color: #00253E;
+                  margin-bottom: 12px;
+                  margin-top: 10px;
+                  // width: 50%;
+                }
+                .article-info-summary{
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #6E7B84;
+                  // margin-bottom: 15px;
+                }
+                .article-bottom{
+                  display: flex;
+                  justify-content: space-between;
+                 ::v-deep .uavatar{
+                    width:34px;
+                    height: 34px;
+                  }
+                  .el-avatar{
+                      width: 34px;
+                      height: 34px;
+                  }
+                }
+              }
+
+            }
+      }
+    }
   }
diff --git a/src/assets/styles/portal.scss b/src/assets/styles/portal.scss
index 2a969300..1f016b50 100644
--- a/src/assets/styles/portal.scss
+++ b/src/assets/styles/portal.scss
@@ -2,7 +2,11 @@
  * 门户页面的一些通用样式定义在这里面
  */
 body {margin: 0px;padding: 0px;}
-
+//定义全局的核心区域宽度
+.xcontent{
+  min-width: 1100px;
+  margin: 0px auto;
+}
 //[文章，案例，问答]详细页面内容部分
 .xpage-detail-content{
   padding: 50px;
@@ -24,6 +28,35 @@ body {margin: 0px;padding: 0px;}
     color:#3d3d3d;
   }
 }
+//课程详细页面banner部分
+ .xpage-coures-banner{
+     width: 100%;
+     height: 200px;
+     background-image: url('../../../public/images/couresdetail.png');
+     background-size: cover;
+     .bcourse-title{
+       color: #fff;
+       margin-top: 20px;
+       font-size: 20px;
+     }
+     .bcourse-score{
+       margin-left: 30px;
+       font-size: 16px;
+     }
+     .banner-crumbs{
+        color: #fff;
+        margin-top:40px;
+        .crumbs-first{
+          font-size: 16px;
+        }
+        .crumbs-line{
+          margin: 0px 10px;
+        }
+        .crumbs-last{
+          font-size: 18px;
+        }
+     }
+ }
 
 //原样式，未修改
 .portal-model-btn{// 写文章，发课程等按钮
@@ -56,9 +89,33 @@ body {margin: 0px;padding: 0px;}
     .ranking-data{
       min-height: 246px;
       margin: 0px;
-      // overflow-y: auto;
+      overflow-y: auto;
     }
 }
+
+.portal-ranking-list{
+  border-radius: 8px;
+  padding: 30px;
+  // height: 544px;
+  // overflow-y: auto;
+  .ranking-title{
+    font-size: 24px;
+    font-family: FZLTCHJW--GB1-0, FZLTCHJW--GB1;
+    font-weight: 600;
+    color: #000000;
+    line-height: 28px;
+    padding-bottom:12px
+  }
+  .ranking-data{
+    min-height: 246px;
+    margin: 0px;
+    // overflow-y: auto;
+  }
+}
+
+
+
+
 //排行块的背景
 .ranking-bg{
   background: url('/images/qa-box.png') no-repeat top left;
@@ -180,18 +237,13 @@ body {margin: 0px;padding: 0px;}
     user-select: none;
   }
   .course-info { //图片下面的一行信息
-    // margin: 5px 15px;
-    // padding-bottom: 10px;
     display: flex;
     justify-content: space-between;
     line-height: 30px;
     .course-info-user{
       font-size: 14px;
       color: #6E7B84;
-      width: 60%;
-      .course-info-author{
-
-      }
+      flex: 1;
       .course-info-studys {
         margin-left: 12px;
         -moz-user-select: none; /*火狐*/
@@ -203,7 +255,7 @@ body {margin: 0px;padding: 0px;}
     }
     .course-info-score{
       display:flex;
-      width: 40%;
+      margin-left: auto;
       ::v-deep .cor-praises {
           // position: absolute;
           -moz-user-select: none; /*火狐*/
@@ -250,30 +302,45 @@ body {margin: 0px;padding: 0px;}
 }
 //以下是多分辨率的控制，注意，只是一些样式的高度，宽度，大小控制，非大小控制不要在这里写
 @media screen and (max-width: 1366px){
+  .xcontent{width: 1100px;}
   .xcontent2{
     width: 1100px;
-    padding: 20px 5px;
+  }
+  .rankimg{
+    width:66px;
+    height:38px;
+    float: left;
   }
   .xcontent2-minor{
-    width: 234px;
+    width: 260px;
   }
   .portal-ranking{
-    padding: 30px 15px;
+    padding: 20px 15px;
+    .ranking-title{
+      font-size: 18px;
+      line-height: 25px;
+      padding-bottom:10px
+    }
   }
   .course-card {
     padding:20px;
     margin-right: 20px;
     .course-image-box {
-      width: 200px;
+      width: 100%;
       height: 114px;
     }
   }
 }
 
 @media screen and (max-width: 1680px) and (min-width:1367px){
+  .xcontent{width: 1366px;}
   .xcontent2{
     width: 1366px;
-    padding: 30px 20px;
+  }
+  .rankimg{
+    width:76px;
+    height:42px;
+    float: left;
   }
   .xcontent2-minor{
     width: 300px;
@@ -292,14 +359,18 @@ body {margin: 0px;padding: 0px;}
 }
 
 @media screen and (max-width: 1920px) and (min-width: 1681px){
+  .xcontent{width: 1690px;}
   .xcontent2{
-    width: 1640px;
-    padding: 30px 26px;
+    width: 1690px;
+  }
+  .rankimg{
+    width:86px;
+    height:42px;
+    float: left;
   }
   .xcontent2-minor{
     width: 400px;
   }
-
   .portal-ranking{
       padding: 30px 30px;
   }
@@ -307,16 +378,21 @@ body {margin: 0px;padding: 0px;}
     padding:25px;
     margin-right: 25px;
     .course-image-box {
-      width: 320px;
+      width: 100%;
       height: 180px;
     }
   }
 }
 
 @media screen and (min-width: 1921px){
+  .xcontent{width: 1880px;}
   .xcontent2{
     width: 1880px;
-    padding: 30px 26px;
+  }
+  .rankimg{
+    width:96px;
+    height:52px;
+    float: left;
   }
   .xcontent2-minor{
     width: 400px;
diff --git a/src/assets/styles/uc.scss b/src/assets/styles/uc.scss
index f1db6c34..bf1479bf 100644
--- a/src/assets/styles/uc.scss
+++ b/src/assets/styles/uc.scss
@@ -1,6 +1,7 @@
 /**
  * 用户中心的一些通用样式，定义在这里面
  */
+
  .uc-center-page{
     font-size: 18px;
     font-weight: 600;
diff --git a/src/components/Course/myNote.vue b/src/components/Course/myNote.vue
index 52d0dfd0..81174dce 100644
--- a/src/components/Course/myNote.vue
+++ b/src/components/Course/myNote.vue
@@ -14,7 +14,7 @@
                 </div>
                 <div class="newcote-text">
                     <el-input type="textarea" :autofocus="true" placeholder="好记性不如烂笔头，记录些什么吧～"
-                        v-model="mynoteData.content" maxlength="200" :autosize="{ minRows: 18, maxRows: 20}"
+                        v-model="mynoteData.content" maxlength="200" :autosize="{ minRows: 8, maxRows: 20}"
                         show-word-limit>
                     </el-input>
                 </div>
@@ -66,7 +66,7 @@
                         <span class="sm">{{mynoteData.openType == 1?'公开':'私密'}}</span>
                         <svg-icon style="float:right;font-size:26px;margin-top:16px" icon-class="spot"></svg-icon>
                     </p>
-                    <div class="newcote-content" style="margin-top:10px;height:436px">
+                    <div class="newcote-content" style="margin-top:10px;min-height:236px;height: 100%;">
                         <div class="newcote-time" v-if="mynoteData.playTime != 0">
                             <img src="../../../public/images/coteplay.png" />
                             {{formatSeconds(mynoteData.playTime)}}
@@ -277,11 +277,11 @@ export default {
                             // courseName: '',// 课程名称
                             openType: 9,// 1表不公开 9表完全公开
                         };
-                        
+
                     }, 2000)
                         // 是编辑新增
                         let event = {
-                            key: "PublishNote",//后台的事件key  
+                            key: "PublishNote",//后台的事件key
                             title: '编辑了笔记',//事件的标题
                             parameters: "",//用户自定义参数 name:value,name:value
                             content: "编辑了笔记",//this.mynoteData.content,//事件的内容
@@ -294,7 +294,7 @@ export default {
                         }
                         this.$store.dispatch("userTrigger", event);
                     }
-                  
+
                 }
             })
             }
@@ -306,7 +306,7 @@ export default {
     },
 }
 </script>
-  
+
 <style scoped lang="scss">
 ::v-deep .el-dropdown-menu__item:hover {
     background: #333333;
@@ -329,7 +329,6 @@ export default {
         position: absolute;
         bottom: 0;
         right: 200px;
-
         .box-text {
             padding: 12px 16px;
             width: 252px;
@@ -409,7 +408,7 @@ export default {
         margin: 30px 0px;
         box-sizing: border-box;
         padding: 35px 30px;
-        height: 474px;
+        height: 100%;
         background-color: #F5F5F5;
     }
 
@@ -417,7 +416,7 @@ export default {
         margin: 30px 0px;
         box-sizing: border-box;
         padding: 8px 30px;
-        height: 550px;
+        min-height: 300px;
         overflow-y: auto;
         background-color: #fff;
 
@@ -436,7 +435,7 @@ export default {
             font-size: 14px;
             padding-bottom: 20px;
 
-           
+
 
             .more {
                 margin-top: 12px;
@@ -474,4 +473,3 @@ export default {
 
 }
 </style>
-  
\ No newline at end of file
diff --git a/src/components/HomePage/homePage.vue b/src/components/HomePage/homePage.vue
index 3e137228..5a4c1522 100644
--- a/src/components/HomePage/homePage.vue
+++ b/src/components/HomePage/homePage.vue
@@ -15,7 +15,7 @@
   
            <div class="user-content">
               <div class="content-top">
-                <h6 content-bottom><router-link to="/homePage"> {{userData.data.name}}</router-link>
+                <h6 content-bottom><router-link to="/home/index"> {{userData.data.name}}</router-link>
                  </h6>
                  <div class="grade">
                      <div>{{userData.level}}</div>
@@ -23,7 +23,7 @@
                  </div>
                  <el-button round plain class="btn-user" size="small" v-if="pageId != userInfo.aid && !isFollowHas" @click="toFollow()">关注TA</el-button>
                  <el-button round plain class="btn-user" size="small" v-if="isFollowHas">已关注</el-button>
-                 <el-button round plain class="btn-user" size="small"><router-link :to="'/homePage/leavingMessage?id='+pageId">去留言</router-link></el-button>
+                 <el-button round plain class="btn-user" size="small"><router-link :to="'/home/leaving?id='+pageId">去留言</router-link></el-button>
               </div>
               <div class="content-bottom">
                 <p class="portal-summary-text">{{userData.data.sign}}</p>
diff --git a/src/components/Portal/authorImg.vue b/src/components/Portal/authorImg.vue
index 4ba53e28..21f9dc3f 100644
--- a/src/components/Portal/authorImg.vue
+++ b/src/components/Portal/authorImg.vue
@@ -56,7 +56,7 @@
     methods:{
       toHome() {
         // ,query:{id:item.objId || item.id}
-        this.$router.push({path:'/homePage?id='+this.aid})
+        this.$router.push({path:'/home/index?id='+this.aid})
       }
     },
     watch:{
diff --git a/src/components/Portal/authorInfo.vue b/src/components/Portal/authorInfo.vue
index b32c94a2..5883b550 100644
--- a/src/components/Portal/authorInfo.vue
+++ b/src/components/Portal/authorInfo.vue
@@ -73,7 +73,7 @@ import { userAvatarText } from "@/utils/tools.js";
     methods:{
       toHome() {
         // ,query:{id:item.objId || item.id}
-        this.$router.push({path:'/homePage?id='+this.aid})
+        this.$router.push({path:'/home/index?id='+this.aid})
       }
     },
     watch:{
diff --git a/src/components/Portal/comments.vue b/src/components/Portal/comments.vue
index c5355823..e2eb33fe 100644
--- a/src/components/Portal/comments.vue
+++ b/src/components/Portal/comments.vue
@@ -59,7 +59,7 @@
 
           </div>
           <div style="width: 90px;display: flex;justify-content: flex-end;">
-            <el-button @click="submit()" style="height: 52px;" type="primary">发布</el-button>
+            <el-button class="publish-button" @click="submit()" style="height: 30px;" type="primary">发布</el-button>
           </div>
         </div>
       </div>
@@ -793,6 +793,11 @@
 </script>
 
 <style lang="scss" scoped>
+.publish-button{
+  // line-height: 30px;
+  padding-top: 7px;
+  margin-top: 22px;
+}
 .anzhu{
   font-size: 14px;
   color: #999;
diff --git a/src/components/Portal/guideBox.vue b/src/components/Portal/guideBox.vue
index fab31d75..c620b844 100644
--- a/src/components/Portal/guideBox.vue
+++ b/src/components/Portal/guideBox.vue
@@ -2,7 +2,7 @@
 	<el-dialog
       :close-on-click-modal="false"
       :visible.sync="guideCollection"
-      :append-to-body="true" 
+      :append-to-body="true"
       top="90px"
       width="900px">
       <div class="gui-box">
@@ -20,8 +20,8 @@
                     <img class="banner-img" style=" margin: 0 auto;" :src="fileBaseUrl + item.img" alt="">
                 </swiper-slide>
                 <div class="swiper-pagination" slot="pagination"></div>
-              </swiper>   
-            </div> 
+              </swiper>
+            </div>
             <p class="gui-text">{{description}}</p>
             <el-button type="primary" class="btn-one" @click="goHome()">进入首页</el-button>
          </div>
@@ -65,22 +65,25 @@
                 navigation: {
                 nextEl: '.swiper-button-next',
                 prevEl: '.swiper-button-prev',
-                }, 
+                },
             },
     	}
     },
     created() {
+        //这里必须放在当前的Session存储中，不能每次都调用
         apiGuide.hasUser().then(res=>{
            if(res.result) {
-            this.guideCollection = true;
-           } else {
             this.guideCollection = false;
+           } else {
+            this.guideCollection = true;
+            //只是在显示时才调用
+            this.getlist();
            }
-        })
-        this.getlist();
+        });
+       
     },
     mounted() {
-   
+
     },
     methods:{
         goHome() {
@@ -94,14 +97,14 @@
                 }
             })
         },
-        
+
         showImg(item) {
           this.resonimg = [];
           if(item){
             this.description = item.description;
             this.resonimg = item.images;
           }
-           
+
         //    this.swiper.update();
         },
         notYet() {
@@ -110,7 +113,7 @@
         },
     },
     watch:{
-    
+
     },
     computed:{
         swiper() {
@@ -135,7 +138,7 @@
             right:-136px;
             top:45px;
         }
-        
+
         ::v-deep .swiper-wrapper{
             padding-bottom: 60px;
         }
@@ -213,7 +216,7 @@
         }
     }
 	::v-deep .el-dialog{
-        // background: #fff url('/images/homeWu/interest.png') no-repeat; 
+        // background: #fff url('/images/homeWu/interest.png') no-repeat;
         border-radius: 10px;
         .el-dialog__header{
             display: none;
diff --git a/src/components/Portal/noteComment.vue b/src/components/Portal/noteComment.vue
index 3fa35f60..17dfa60e 100644
--- a/src/components/Portal/noteComment.vue
+++ b/src/components/Portal/noteComment.vue
@@ -11,7 +11,7 @@
         <!--列表内容-->
         <div class="comments-items" v-show="listShow">
             <!--一个评论-->
-            <div class="zan-wu" v-if="list.length == 0">暂无评论～</div>
+            <div class="zan-wu" v-if="list.length == 0">暂无公开笔记～</div>
             <div class="comment" v-for="(com,comIdx) in list" :key="com.id">
                  <div class="comment-top">
                     <div class="comment-author">
diff --git a/src/components/PortalHeader.vue b/src/components/PortalHeader.vue
index c135396c..8be888c9 100644
--- a/src/components/PortalHeader.vue
+++ b/src/components/PortalHeader.vue
@@ -1,31 +1,35 @@
 <template>
   <div class="portal-header">
-    <div class="portal-top">
+    <div class="portal-top" :style="{color:textColor}">
         <div class="portal-top-left">
           <div class="portal-top-logo">
-            <img src="../assets/logo/logo.png" v-if="current == 'qa'" style="width:160px;height: 27px;" />
-            <img src="../assets/logo/logo2.png" v-else style="width:160px;height: 27px;" />
+            <img src="../assets/logo/logo-white.png" v-if="textColor == '#fff' || textColor == '#ffffff'" style="width:160px;height: 27px;" />
+            <img src="../assets/logo/logo.png" v-else style="width:160px;height: 27px;" />
           </div>
           <div class="portal-top-nav">
-            <div class="top-nav" :class="current == 'index' ? 'current-nav' : ''">
-              <router-link to="/index">首页
-              <div :class="current == 'index' ? 'nav-bottbor' : ''"></div>
-            </router-link></div>
-            <div class="top-nav" :class="current == 'course' ? 'current-nav' : ''">
+            <div class="top-nav" :style="{color:textColor}" :class="current == 'index' ? activeNav : ''">
+              <router-link to="/index" >首页
+                <div :class="current == 'index' ? 'nav-bottbor' : ''"></div>
+              </router-link>
+            </div>
+            <div class="top-nav" :style="{color:textColor}" :class="current == 'course' ? activeNav : ''">
               <router-link to="/course">课程
-              <div :class="current == 'course' ? 'nav-bottbor' : ''"></div>
-              </router-link></div>
-            <div class="top-nav" :class="current == 'article' ? 'current-nav' : ''">
+                <div :class="current == 'course' ? 'nav-bottbor' : ''"></div>
+              </router-link>
+            </div>
+            <div class="top-nav" :style="{color:textColor}" :class="current == 'article' ? activeNav : ''">
               <router-link to="/article">文章
-              <div :class="current == 'article' ? 'nav-bottbor' : ''"></div>
-              </router-link></div>
-            <div class="top-nav" :class="current == 'qa' ? 'current-nav' : ''">
-              <router-link to="/qa">问答
-              <div :class="current == 'qa' ? 'nav-bottbor' : ''"></div>
-              </router-link></div>
+                <div :class="current == 'article' ? 'nav-bottbor' : ''"></div>
+              </router-link>
+            </div>
+            <div class="top-nav" :style="{color:textColor}" :class="current == 'qa' ? activeNav : ''">
+              <router-link to="/qa" >问答
+                <div :class="current == 'qa' ? 'nav-bottbor' : ''"></div>
+              </router-link>
+            </div>
             <div class="top-nav">
               <el-dropdown placement="bottom" @command="handleCommand">
-                <span class="el-dropdown-link" style="font-size:16px;cursor: pointer;">专区</span>
+                <span class="el-dropdown-link" style="font-size:16px;cursor: pointer;" :style="{color:textColor}">专区</span>
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item command="one">BOE系列公开课</el-dropdown-item>
                   <el-dropdown-item command="two" divided>Grow180</el-dropdown-item>
@@ -35,12 +39,16 @@
                 </el-dropdown-menu>
               </el-dropdown>
             </div>
-            <div class="top-nav" :class="current == 'case' ? 'current-nav' : ''"><router-link to="/case">推荐案例
-            <div :class="current == 'case' ? 'nav-bottbor' : ''"></div>
-            </router-link></div>
-            <div class="top-nav" :class="current == 'follow' ? 'current-nav' : ''"><router-link to="/follow">我的关注
-            <div :class="current == 'follow' ? 'nav-bottbor' : ''"></div>
-            </router-link></div>
+            <div class="top-nav" :style="{color:textColor}" :class="current == 'case' ? activeNav : ''">
+              <router-link to="/case">推荐案例
+                  <div :class="current == 'case' ? 'nav-bottbor' : ''"></div>
+              </router-link>
+            </div>
+            <div class="top-nav" :style="{color:textColor}" :class="current == 'follow' ? activeNav : ''">
+              <router-link to="/follow">我的关注
+                <div :class="current == 'follow' ? 'nav-bottbor' : ''"></div>
+              </router-link>
+            </div>
           </div>
         </div>
         <div class="portal-top-right">
@@ -75,8 +83,8 @@
             <div class="person-action-item">
                 <el-dropdown class="person-action-index">
                   <span class="el-dropdown-link">
-                    <span v-if="current == 'qa'" style="color: #333;">学员</span>
-                    <span v-else style="color: #fff;">学员</span><i class="el-icon-arrow-down el-icon--right"></i>
+                    <span :style="{color:textColor}">学员</span>
+                    <i class="el-icon-arrow-down el-icon--right"></i>
                   </span>
                   <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item><router-link to="/index">学员</router-link></el-dropdown-item>
@@ -87,7 +95,7 @@
              </div>
              <div class="person-action-item">
                 <el-dropdown>
-                  <div class="el-dropdown-link" style="display:flex">
+                  <div class="el-dropdown-link" style="display:flex" :style="{color:textColor}">
                     <div class="person-action-index">
                       <div v-if="userInfo.avatar !== '' " class="user-avatar">
                           <img :src="userInfo.avatar"  style="width: 30px;height: 30px;"/>
@@ -97,21 +105,21 @@
                           <div v-else><img src="../../public/images/Avatarwoman.png" alt=""></div>
                       </div>
                     </div>
-                    <div v-if="current == 'qa'" style="color:#333333 ;font-size: 14px;font-weight: 600;margin-top: 10px;">{{userInfo.name}}</div>
-                    <div v-else style="color:#fff;font-size: 14px;font-weight: 600;margin-top: 10px;">{{userInfo.name}}</div>
+                    <div v-if="current == 'qa'" style="font-size: 14px;font-weight: 600;margin-top: 10px;">{{userInfo.name}}</div>
+                    <div v-else style="font-size: 14px;font-weight: 600;margin-top: 10px;">{{userInfo.name}}</div>
                   </div>
                   <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item @click.native="setCurIdentity(1)"><a :href="`${webBaseUrl}${isTiao ? '/uc/study/task' : '/uc/study/courses'}`">个人中心</a></el-dropdown-item>
-                    <el-dropdown-item><router-link :to="'/homePage?id='+userInfo.aid">个人主页</router-link></el-dropdown-item>
+                    <el-dropdown-item><router-link :to="'/home/index?id='+userInfo.aid">个人主页</router-link></el-dropdown-item>
                   </el-dropdown-menu>
                 </el-dropdown>
             </div>
             <div class="person-action-item">
-              <div v-if="current == 'qa'" class="person-action-index" style="color:#333333" @click="logout()">
+              <div v-if="current == 'qa'" class="person-action-index" :style="{color:textColor}" @click="logout()">
                 <svg-icon  style="margin-right: 4px;font-size:22px;" icon-class="black-out"></svg-icon>登出
               </div>
-              <div v-else class="person-action-index" style="color:#fff" @click="logout()">
-                <svg-icon  style="margin-right: 4px;font-size:22px;color: #333333;" icon-class="white-out"></svg-icon>登出
+              <div v-else class="person-action-index" :style="{color:textColor}" @click="logout()">
+                <svg-icon  style="margin-right: 4px;font-size:22px;" icon-class="white-out"></svg-icon>登出
               </div>
             </div>
           </div>
@@ -127,9 +135,7 @@ import apiMessage from '@/api/system/message.js';
 import apiBoeCourse from '@/api/boe/course.js';
 import InterestCollection from '@/components/Portal/interestCollection.vue'
 import GuideBox from '@/components/Portal/guideBox.vue'
-import {
-  userAvatarText
-} from "@/utils/tools.js";
+import {userAvatarText} from "@/utils/tools.js";
 export default {
   props: {
     current: {
@@ -140,6 +146,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    textColor:{
+      type: String,
+      default: '',
+    },
     goSearch:{
       type: Number,
       default: 0,
@@ -151,6 +161,12 @@ export default {
 
     avatarText(){
       return userAvatarText(this.userInfo.name);
+    },
+    activeNav(){
+        return {
+          'top-nav-active-blue': this.textColor=='#000000',
+          'top-nav-active-white': this.textColor=='#fff' || this.textColor=='#ffffff',
+        }
     }
   },
   data() {
@@ -290,6 +306,33 @@ export default {
 </script>
 
 <style scoped rel="stylesheet/scss" lang="scss">
+.top-nav-active-blue{
+    color: #387DF7;
+    a{color:#387DF7;}
+    div{
+      width: 75%;
+      height: 4px;
+      top: 75%;
+      left: 13%;
+      background: #387DF7;
+      border-radius: 5px;
+      position: absolute;
+    }
+}
+.top-nav-active-white{
+    color: #fff;
+    a{color:#fff;}
+    div{
+      width: 75%;
+      height: 4px;
+      top: 75%;
+      left: 13%;
+      background: #fff;
+      border-radius: 5px;
+      position: absolute;
+    }
+}
+
 .sear-but{
   position: absolute;
   bottom: 10%;
diff --git a/src/components/UcHeader/Index.vue b/src/components/UcHeader/Index.vue
index 63044990..22baf9f6 100644
--- a/src/components/UcHeader/Index.vue
+++ b/src/components/UcHeader/Index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="uc-header xcontent">
-    <div class="header-box" >
+  <div class="uc-header">
+    <div class="uc-header-box" >
       <div class="personalData">
          <!-- <div >
            <img src="../../../public/images/Avatarwoman.png" alt="">
@@ -8,8 +8,10 @@
           <div class="uesr-avaer">
           <img :src="userInfo.avatar" v-if="userInfo.avatar !== '' ">
           <div v-else class="uavatar">
+            <router-link :to="'/home/index?id='+userInfo.aid">
               <div v-if="sex === 1 "><img src="../../../public/images/Avatarman.png" alt=""></div>
               <div v-else><img src="../../../public/images/Avatarwoman.png" alt=""></div>
+            </router-link>
           </div>
            </div>
 
@@ -48,7 +50,7 @@
            <div class="learning-an"><span>{{uinfo.monthTotal}}</span>h</div>
         </div>
         <div class="learning-border" ></div>
-         <div class="learning-info" style="margin-left:22px">
+         <div class="learning-info">
            <div class="learning-qus">当月学习天数</div>
            <div class="learning-an"><span>{{uinfo.monthDay}}</span>天</div>
         </div>
@@ -57,62 +59,14 @@
            <div class="learning-an"><span>{{uinfo.monthTotalDay}}</span>天</div>
         </div>
          <div class="learning-border" ></div>
-         <div class="learning-info" style="margin-left:22px">
+         <div class="learning-info">
            <div class="learning-qus">我的U币（累计）</div>
            <div class="learning-an"><span>{{uinfo.uCurrency}}</span></div>
         </div>
-        <div @click="jumrank" class="list">
-          BOE 排行榜 >>
+        <div class="learning-info">
+            <div @click="jumrank" style="cursor: pointer;" class="ranking-link"> BOE 排行榜 >></div>
         </div>
       </div>
-      <!-- <div style="display: flex;justify-content: flex-start;">
-       
-        
-        <div style="padding-left: 15px;">
-          <div style="height: 38px;padding-left: 5px;">
-              <span style="font-size: 20px;font-weight: 500;color: #333;">{{userInfo.name}}</span>
-              <span style="padding-left: 10px;color: #888888;font-size: 12px;cursor: pointer;">
-                <el-link @click="toPage('/user/Setting')" icon="el-icon-setting" type="info" :underline="false">个人设置</el-link>
-              </span>
-          </div>
-          <div style="height: 35px;padding-left: 5px;color:#7a7a7a;">
-            <span style="color: #7a7a7a;padding-right: 15px;" v-if="orgInfo">{{orgInfo}}</span>
-            目前海没有实时更新的策略，暂未处理
-            <span>学习时长：{{userInfo.studyTotalH}}小时</span>
-          </div>
-          <div>
-            <router-link to="/study/index"><span :class="{identity:true,active:curIdentity==1}" @click="setCurIdentity(1)">学员</span></router-link>
-            <router-link to="/teacher/index"><span v-if="identity == 2 || identity == 5" :class="{identity:true,active:curIdentity==2}" @click="setCurIdentity(2)">教师</span></router-link>
-            <router-link to="/manager/index"><span v-if="identity == 3 || identity == 5" :class="{identity:true,active:curIdentity==3}" @click="setCurIdentity(3)">管理员</span></router-link>
-          </div>
-        </div>
-      </div> -->
-      <!-- <div style="display: flex;justify-content: flex-end;padding-top: 35px;"> -->
-        <!-- q1没有课程表，所以这里先隐藏
-          <div v-if="curIdentity==2" style="padding: 0px 40px 0px 0px;color: #1EA0FA;text-align: center;">
-            <div><i style="font-size: 40px;" class="el-icon-date"></i> <br/>授课表</div>
-          </div>
-          -->
-          <!---->
-          <!-- <div>
-            <div tabindex="1" class="upicon" @click="toPage('/user/myshare')">
-              <i  class="el-icon-share"></i>
-              <div>我分享的</div>
-            </div>
-          </div>
-          <div>
-            <div tabindex="2" class="upicon" @click="toPage('/user/toshare')">
-              <i  class="el-icon-s-promotion"></i>
-              <div>分享给我的</div>
-            </div>
-          </div>
-          <div>
-            <div tabindex="3" class="upicon" @click="toPage('/user/favorites')">
-              <i  class="el-icon-star-on"></i>
-              <div>我的收藏</div>
-            </div>
-          </div> -->
-      <!-- </div> -->
     </div>
   </div>
 </template>
@@ -184,7 +138,7 @@ import {userAvatarText,cutFullName} from "@/utils/tools.js";
                 this.uinfo.uCurrency = item.total;
               }
             });
-           } 
+           }
         })
       },
       setCurIdentity(iden){
@@ -202,19 +156,19 @@ import {userAvatarText,cutFullName} from "@/utils/tools.js";
 </script>
 
 <style lang="scss" scoped>
-.list{
+.ranking-link{
   font-size: 16px;
   font-weight: 600;
   color: #333333;
   margin-top: 20px;
 }
 .learningData{
-   width: 50%;
   padding-top: 70px;
   box-sizing: border-box;
   margin-left:auto;
   .learning-info{
     float: left;
+    margin-left: 20px;
     margin-right: 22px;
      .learning-qus{
           font-size: 14px;
@@ -254,7 +208,7 @@ import {userAvatarText,cutFullName} from "@/utils/tools.js";
          vertical-align: top;
      }
    }
-  
+
    .medalbutt{
      color: #333333;
      font-size: 14px;
@@ -262,13 +216,11 @@ import {userAvatarText,cutFullName} from "@/utils/tools.js";
     //  float: left;
      margin-top: 6px;
    }
- 
+
 }
 .personalData{
- 
   flex: 1;
   padding-top: 40px;
-  padding-left: 115px;
   box-sizing: border-box;
   display: flex;
   .uesr-avaer{
@@ -330,21 +282,21 @@ import {userAvatarText,cutFullName} from "@/utils/tools.js";
   }
 }
 
-.header-box{
+.uc-header-box{
   display: flex;
   justify-content: space-between;
   height: 210px;
-  background: url('../../../public/images/userbgimg.png') no-repeat;
-  background-size:445px 210px;
-   background-position: right 0;
+  margin: 0 auto;
 }
 
  .uc-header{
-   height: 210px;
-   margin: 0 auto;
+    height: 210px;
 
-  background: #fff;
-  //  background-color: #c9c2c2;
+    background-color: #fff;
+    background-image: url('../../../public/images/userbgimg.png') ;
+    background-repeat: no-repeat;
+    background-size:445px 210px;
+    background-position: right 0;
  }
  .upicon{
    text-align: center;
@@ -386,8 +338,8 @@ import {userAvatarText,cutFullName} from "@/utils/tools.js";
     padding-top: 10px;
      color: #aa0000;
   }
- }
- .uavatar{
+}
+.uavatar{
    border-radius: 50%;
     // border: 1px solid #73adfe;
     // color: #73adfe;
@@ -399,13 +351,139 @@ import {userAvatarText,cutFullName} from "@/utils/tools.js";
     border-radius: 50%;
     // background: #d9e9ff;
     div{
-     border-radius: 50%;
+      border-radius: 50%;
       img{
-     border-radius: 50%;
+        border-radius: 50%;
         width: 100px;
         height: 100px;
-
+      }
+    }
 }
+
+@media screen and (max-width: 1366px){
+  .uc-header-box {
+    width: 1160px;
+  }
+  .learningData{
+    margin-left:auto;
+    .learning-info{
+      margin-left: 10px;
+      margin-right: 10px;
+      .learning-qus{
+        font-size: 12px;
+      }
+      .learning-an{
+        font-size: 12px;
+      }
     }
   }
+  .personalData{
+    .uesr-avaer{
+      margin-right: 10px;
+    }
+    .user-content{
+      .content-top{
+        .grade{
+          div{
+              width: 48px;
+          }
+          span{
+            font-size: 14px;
+          }
+        }
+        h6{
+          font-size: 26px;
+        }
+        span{
+          font-size: 14px;
+          margin-left: 5px;
+          margin-right: 10px;
+        }
+        .editbutt{
+          width: 80px;
+          height: 25px;
+          line-height: 5px;
+          text-align: center;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+  .content-bottom{
+     .medalbutt{
+       margin-right: 20px;
+     }
+
+  }
+}
+@media screen and (max-width: 1680px) and (min-width:1367px){
+  .uc-header-box {
+    width: 1300px;
+  }
+  .learningData{
+    margin-left:auto;
+    .learning-info{
+      margin-left: 10px;
+      margin-right: 12px;
+    }
+  }
+  
+  .personalData{
+    .uesr-avaer{
+      margin-right: 10px;
+    }
+    .user-content{
+      .content-top{
+        .grade{
+          div{
+              width: 48px;
+          }
+          span{
+            font-size: 14px;
+          }
+        }
+        h6{
+          font-size: 26px;
+        }
+        span{
+          font-size: 14px;
+          margin-left: 5px;
+          margin-right: 15px;
+        }
+        .editbutt{
+          width: 80px;
+          height: 25px;
+          line-height: 5px;
+          text-align: center;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+@media screen and (max-width: 1920px) and (min-width: 1681px){
+  .uc-header-box {
+    width: 1600px;
+  }
+  .learningData{
+    margin-left:auto;
+    .learning-info{
+      margin-left: 20px;
+      margin-right: 22px;
+    }
+  }
+}
+
+@media screen and (min-width: 1921px){
+  .uc-header-box {
+    width: 1800px;
+  }
+  .learningData{
+    margin-left:auto;
+    .learning-info{
+      margin-left: 30px;
+      margin-right: 30px;
+    }
+  }
+}
 </style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 5ffa877b..8729b3bc 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -1,12 +1,12 @@
 <template>
-  <section class="app-main xcontent">
+  <section class="app-main xuc-content">
     <div style="display: flex;">
-      <div style="height: 100%;width: 227px;">
+      <div style="height: 100%;width: 210px;">
         <uc-menu></uc-menu>
         <!-- <div style="height: 20px;"></div> -->
       </div>
       <!-- width: 990px; -->
-      <div class="main-body" style="padding: 30px 30px;flex:1; background-color: #fff;margin-left: 32px;">
+      <div class="main-body" style="padding: 30px 20px;flex:1; background-color: #fff;margin-left: 32px;">
         <!-- <div style="margin-bottom: 10px;padding:10px; border-bottom: 1px solid #dbdbdb;"> -->
           <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
             <el-breadcrumb-item :to="{ path: '/uc/index' }"><i class="el-icon-arrow-right"></i>个人中心</el-breadcrumb-item>
@@ -60,7 +60,7 @@ export default {
   //width: 1500px;
   // width: 1000px;
   // margin: 0 auto;
-  padding-top: 10px;
+  padding-top: 20px;
   position: relative;
   overflow: hidden;
 }
@@ -98,6 +98,30 @@ export default {
   display: block;
   margin: 5px 10px;
 }
+.xuc-content{
+  margin: 0px auto;
+}
+@media screen and (max-width: 1366px){
+  .xuc-content {
+    width: 1100px;
+  }
+}
+@media screen and (max-width: 1680px) and (min-width:1367px){
+  .xuc-content {
+    width: 1300px;
+  }
+}
+@media screen and (max-width: 1920px) and (min-width: 1681px){
+  .xuc-content {
+    width: 1600px;
+  }
+}
+
+@media screen and (min-width: 1921px){
+  .xuc-content {
+    width: 1800px;
+  }
+}
 </style>
 
 <style lang="scss">
diff --git a/src/layout/components/TopNav/Index.vue b/src/layout/components/TopNav/Index.vue
index 547225ca..800f09a0 100644
--- a/src/layout/components/TopNav/Index.vue
+++ b/src/layout/components/TopNav/Index.vue
@@ -4,7 +4,7 @@
       <div class="xtop-content">
       <div class="xtop-left">
         <div class="xtop-logo">
-          <router-link class="routerLink" to="/index"><img src="../../../assets/logo/logo2.png" style="width:240px;height: 41px;" /></router-link>
+          <router-link class="routerLink" to="/index"><img src="../../../assets/logo/logo-white.png" style="width:161px;height:27px;" /></router-link>
         </div>
         <div class="xtop-nav">
           <div class="xtop-nav-item"><a :href="`${webBaseUrl}/index`">首页</a></div>
@@ -46,7 +46,8 @@
               </el-link>
             </el-badge>
           </div>
-          <el-dropdown class="person-action-index" style="margin-left: 44px;">
+          <div>
+            <el-dropdown class="person-action-index" style="margin-left: 44px;">
               <span class="el-dropdown-link">
                  <span v-if="current == 'qa'" style="color: #333;">学员</span>
                 <span v-else style="color: #fff;">学员</span><i class="el-icon-arrow-down el-icon--right"></i>
@@ -58,7 +59,19 @@
                 <el-dropdown-item v-if="identity == 3 || identity == 5" @click.native="setCurIdentity(3)"><router-link to="/course/manage">管理员</router-link></el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
-          <div style="margin-left: 50px;color: #fff;"><el-avatar :src="userInfo.avatar" style="vertical-align: middle;width:40px;height:40px;margin-right:10px;"></el-avatar>{{userInfo.name}}</div>
+          </div>
+          <div>
+            <el-dropdown>
+                <div style="margin-left: 50px;color: #fff;font-size: 14px;cursor: pointer;">
+                  <el-avatar :src="userInfo.avatar" style="vertical-align: middle;width:40px;height:40px;margin-right:10px;"></el-avatar>{{userInfo.name}}
+                </div>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item @click.native="setCurIdentity(1)"><a :href="`${webBaseUrl}${isTiao ? '/uc/study/task' : '/uc/study/courses'}`">个人中心</a></el-dropdown-item>
+                  <el-dropdown-item><router-link :to="'/home/index?id='+userInfo.aid">个人主页</router-link></el-dropdown-item>
+                </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+
           <!-- <div style="margin-left: 5px;">
             <el-dropdown @command="handleUcCommand">
               <span class="el-dropdown-link">
@@ -69,9 +82,9 @@
               </el-dropdown-menu>
             </el-dropdown>
           </div> -->
-		  <div class="person-action">
-		    <el-button @click="logout()" type="text"><svg-icon  style="margin-right: 4px;font-size:22px;color: #000;" icon-class="white-out"></svg-icon>登出</el-button>
-		  </div>
+        <div class="person-action">
+          <el-button @click="logout()" type="text"><svg-icon  style="margin-right: 4px;font-size:22px;color: #000;" icon-class="white-out"></svg-icon>登出</el-button>
+        </div>
       </div>
       </div>
     </div>
@@ -99,7 +112,7 @@
            </map>
         </div>
     </el-dialog>
-   
+
   </div>
 </template>
 
diff --git a/src/router/index.js b/src/router/index.js
index 14ee8387..48f678c2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -150,21 +150,21 @@ export const constantRoutes = [{
     meta: { title: '我的消息', icon: 'dashboard', noCache: true, affix: false },
 },
 {
-    path: '/homePage',
+    path: '/home',
     hidden: true,
     component: (resolve) => require(['@/views/homepage/Index'], resolve),
     name: 'homePage',
-    redirect: '/homePage/page',
+    redirect: '/home/index',
     meta: { title: '主页', icon: 'dashboard', noCache: true, affix: false },
     children: [{
-        path: 'page',
+        path: 'index',
         hidden: true,
         component: (resolve) => require(['@/views/homepage/page'], resolve),
         name: 'page',
         meta: { title: '主页', icon: 'dashboard', noCache: true, affix: true }
     },
     {
-        path: 'leavingMessage',
+        path: 'leaving',
         hidden: true,
         component: (resolve) => require(['@/views/homepage/leavingMessage'], resolve),
         name: 'leavingMessage',
diff --git a/src/views/Index.vue b/src/views/Index.vue
index b9264f8b..5fa976e3 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-     <div class="course-banner">
-       <portal-header current="index" style="z-index:999; position: relative;" ></portal-header>
+    <div class="course-banner">
+      <portal-header current="index" textColor="#000000" style="z-index:999; position: relative;"></portal-header>
       <div id="container" style="z-index:99;">
         <swiper :options="swiperOption" ref="mySwiper" v-if="resonimg.length">
-          <swiper-slide  style="margin: 0 auto;" v-for="(item , idx ) in resonimg" :key="idx" class="swiper-slide games">
-            <div class="bannbox"  :style="{ 'background': `url(${fileBaseUrl + item.image}) no-repeat 100% / 100%`}" >
+          <swiper-slide style="margin: 0 auto;" v-for="(item , idx ) in resonimg" :key="idx" class="swiper-slide games">
+            <div class="bannbox" :style="{ 'background': `url(${fileBaseUrl + item.image}) no-repeat 100% / 100%`}">
             </div>
             <img class="banner-img" style=" margin: 0 auto;" :src=" fileBaseUrl + item.image" alt="">
           </swiper-slide>
@@ -18,16 +18,17 @@
         <!-- <img style="width:68px;height:68px" src="/images/Avatarman.png" alt=""> -->
         <p class="personal-name">{{userInfo.name}} {{userInfo.userNo}}</p>
         <p class="personal-info">{{userInfo.departName}}</p>
-        <div class="personal-box"><span>代办</span><span>3个待处理</span><img class="personal-box-img" src="/images/homeWu/agency.png" alt="" srcset=""></div>
+        <div class="personal-box"><span>代办</span><span>3个待处理 <img src="/images/homeWu/Pending.png" alt=""> </span> <img class="personal-box-img"
+            src="/images/homeWu/agency.png" alt="" srcset=""></div>
         <ul class="personal-ul">
           <li>
             <span class="label">累计学习</span>
-            <p><span>{{userData.studyHourValue}}</span>小时</p>
+            <p><span>{{userData.studyHourValue}}</span>h</p>
           </li>
-          <li>
+          <!-- <li>
             <span class="label">经验值等级</span>
             <p><span>{{userData.level}}</span></p>
-          </li>
+          </li> -->
           <li>
             <span class="label">我的U币</span>
             <p><span>{{userData.coinValue}}</span>个</p>
@@ -35,10 +36,10 @@
         </ul>
       </div>
     </div>
-    <div class="xindex-content" >
+    <div class="xindex-content">
       <!-- 推荐课程 -->
-      <div class="modules">
-        <div>
+      <div class="modules xcontent2">
+        <div class="xcontent2-main">
           <!--内容块-->
           <div class="modules-title">
             <span class="modules-text">推荐课程</span>
@@ -47,7 +48,7 @@
               <a :class="courseList.orderType == 1 ? 'current' : ''" @click="orderTypeFilter(1)">最新</a>
               <span @click="jumUX()" class="Uxtext" style=""> U选小课堂
                 <span class="uxicon">
-                    <svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
+                  <svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
                 </span>
               </span>
             </span>
@@ -55,180 +56,203 @@
               <router-link to="/course">查看更多</router-link>
             </span>
           </div>
-          <div class="modules-list xrow" style="margin-right:0px">
-            <!--一个固定内容-->
-
-              <div class="xindex-course">
-                <a href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course">
-                  <div class="xindex-course-image">
-                    <el-image class="course-image" :src="this.webBaseUrl+'/ad/index_course.png'" fit="fit"></el-image>
-                    <span class="course-type">录播课</span>
-                  </div>
+          <div class="modules-list" style="margin-right:0px">
+            <!-- 一个固定内容 -->
+            <div class="xindex-course">
+              <a href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course">
+                <div class="xindex-course-image">
+                  <el-image class="course-image" :src="this.webBaseUrl+'/ad/index_course.png'" fit="fit"></el-image>
+                  <span class="course-type">录播课</span>
+                </div>
                 <div title="高效谈判系列课" class="course-title portal-title-tow two-line-ellipsis">高效谈判系列课</div>
-                  <div class="course-author">
-                    <!-- <div class="course-author-left" > </div> -->
+                <div class="course-author">
+                  <!-- <div class="course-author-left" > </div> -->
+                  <div>
+                    <span class="study-num">2581人学习</span>
+                  </div>
+                  <div style="padding-left:15px">
                     <div>
-                      <span class="study-num">2581人学习</span>
-                    </div>
-                    <div style="padding-left:15px">
-                      <div >
-                        <span class="course-score-value">5.0</span>
-                      </div>
+                      <span class="course-score-value">5.0</span>
                     </div>
                   </div>
-                </a>
-              </div>
+                </div>
+              </a>
+            </div>
 
             <!--内容列表内容-->
-            <div  v-for="course in courseList.list" :key="course.id" class="xindex-course">
-                <a :href="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 v-for="course in courseList.list" :key="course.id" class="xindex-course">
+              <a :href="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 :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">{{ course.studys }}人学习</span>
                   </div>
-                  <div :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">{{ course.studys }}人学习</span>
-                    </div>
-                    <div style="padding-left:15px">
-                      <div v-if="course.score">
-                        <span class="course-score-value">{{ toScore(course.score) }}</span>
-                      </div>
-                      <div v-else class="course-score-no">未评分</div>
+                  <div style="padding-left:15px">
+                    <div v-if="course.score">
+                      <span class="course-score-value">{{ toScore(course.score) }}</span>
                     </div>
+                    <div v-else class="course-score-no">未评分</div>
                   </div>
-                </a>
-                <div class="cor-praises"><interactBar :type="1" :data="course" :comments="false" :praises="false" :shares="false" :views="false"></interactBar></div>
+                </div>
+              </a>
+              <div class="cor-praises">
+                <interactBar :type="1" :data="course" :comments="false" :praises="false" :shares="false" :views="false">
+                </interactBar>
+              </div>
             </div>
           </div>
         </div>
 
-        <div style="margin-top:60px">
-          <div class="ranking-card xindex-ranking course-ran-bg">
-                <p class="portal-title-one" style="padding-bottom:12px">课程排行榜</p>
-                <ul class="course-index-list">
-                   <li class="list-info" v-for="(item, index) in scorelist" :key="index" style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
-                        <span class="portal-right-text blue-one">
-                          <img :src="getPic(index)" alt="">
-                        </span>
-                        <span class="portal-title-desc title-line-ellipsis" v-if="item.images == ''" style="font-size: 14px;">{{ item.name }}</span>
-                        <span class="portal-title-desc" v-else style="font-size: 14px;">
-                          <img style="width:96px;height:52px" :src="fileBaseUrl + item.images" alt=""/>
-                          <span class="portal-images-title two-line-ellipsis">{{ item.name }}</span>
-                        </span>
+        <div class="xcontent2-minor" style="margin-top:60px">
+          <div class="portal-ranking ranking-bg">
+            <p class="ranking-title">课程排行榜</p>
+            <ul class="xindex-ranking-course">
+              <li class="xindex-ranking-li" v-for="(item, index) in scorelist" :key="index">
+                <span class="portal-right-text blue-one">
+                  <img :src="getPic(index)" alt="">
+                </span>
+                <span class="portal-title-desc two-line-ellipsis title-line-ellipsis" style="font-size: 14px;">{{ item.name }}</span>
 
-                      <div class="list-active">
-                         <div class="list-content">
-                           <div class="list-img">
-                            <course-image :course="item"></course-image>
-                            <span v-if="item.type < 21" class="course-type">录播</span>
-                            <span v-if="item.type==30" class="course-type">线下课</span>
-                            <span v-if="item.type==40" class="course-type">学习项目</span>
-                          </div>
-                           <div class="list-text">
-                             <h6 class="two-line-ellipsis">{{item.name}}</h6>
-                             <span>{{item.publishTime}}</span>
-                           </div>
-                         </div>
-                         <div class="list-bottom">
-                          <interactBar :type="1" :data="item" :couseViews="true" :shares="false" :views="false"></interactBar>
-                         </div>
-                      </div>
-                   </li>
-                </ul>
+                <div class="list-active">
+                  <div class="list-content">
+                    <div class="list-img">
+                      <course-image :course="item"></course-image>
+                      <span v-if="item.type < 21" class="course-type">录播</span>
+                      <span v-if="item.type==30" class="course-type">线下课</span>
+                      <span v-if="item.type==40" class="course-type">学习项目</span>
+                    </div>
+                    <div class="list-text">
+                      <h6 class="two-line-ellipsis">{{item.name}}</h6>
+                      <span>{{item.publishTime}}</span>
+                    </div>
+                  </div>
+                  <div class="list-bottom">
+                    <interactBar :type="1" :data="item" :couseViews="true" :shares="false" :views="false"></interactBar>
+                  </div>
+                </div>
+              </li>
+            </ul>
           </div>
         </div>
       </div>
-        <!-- 推荐案例2版 -->
-      <div class="modules">
-        <div>
+      <!-- 推荐案例2版 -->
+      <div class="modules xcontent2">
+        <div class="xcontent2-main">
           <div class="modules-title"><span class="modules-text">推荐案例</span>
-          <span class="quyer-tag">
-          <a :class="caseList.orderType==2?'current':''" @click="changeCaseOrder(2)">最热</a>
-          <a :class="caseList.orderType==1?'current':''" @click="changeCaseOrder(1)">最新</a>
-          </span>
-          <span class="more"><router-link to="/case">查看更多</router-link></span>
+            <span class="quyer-tag">
+              <a :class="caseList.orderType==2?'current':''" @click="changeCaseOrder(2)">最热</a>
+              <a :class="caseList.orderType==1?'current':''" @click="changeCaseOrder(1)">最新</a>
+            </span>
+            <span class="more">
+              <router-link to="/case">查看更多</router-link>
+            </span>
           </div>
-            <div class="modules-list">
-              <ul class="case-box">
-                <li class="case-index boe-case-index" v-for="(ca,ind) in caseList.list" :key="ca.id">
-                   <div class="case-top"></div>
-                   <div class="case-conent">
-                     <p class="cast-time">
-                       <span class="time-one" v-if="caseList.orderType==2"><svg-icon style="margin-right: 0;font-size:16px;" icon-class="crown"></svg-icon>人气榜NO.{{ind+1}}</span>
-                       <span style="float: right;">{{ca.sysCreateTime.substring(0, 10)}}</span>
-                     </p>
-                     <p :title="ca.title" class="two-line-ellipsis case-title">
-                      {{ca.title}}
-                    </p>
-                     <p class="case-text three-line-ellipsis">{{ca.summary}}</p>
-                     <p class="case-info"><interactBar :type="3" :readonly="true" :data="ca" :shares="false" :views="false"></interactBar></p>
-                   </div>
-                   <div class="case-inter">
-                    <div><authorInfo :avatar="ca.authorInfo.avatar" :info="ca.authorInfo.orgInfo" :name="ca.authorInfo.name" :sex="ca.authorInfo.sex"></authorInfo></div>
-                    <div class="interact-bar-index"  style="font-size: 12px;color: #6E7B84;display: flex;line-height: 30px;"><interactBar :type="3" :readonly="true" :comments="false" :praises="false" :favorites="false" :data="ca" :shares="false" :views="true"></interactBar>人观看</div>
-                    <!-- -->
-                   </div>
-                </li>
-              </ul>
+          <div class="modules-list">
+            <div class="xindex-case"  v-for="(ca,ind) in caseList.list" :key="ca.id">
+              <div class="case-index boe-case-index">
+                <div class="case-top"></div>
+                <div class="case-conent">
+                  <p class="cast-time">
+                    <span class="time-one" v-if="caseList.orderType==2">
+                      <svg-icon style="margin-right: 0;font-size:16px;" icon-class="crown"></svg-icon>人气榜NO.{{ind+1}}
+                    </span>
+                    <span style="float: right;">{{ca.sysCreateTime.substring(0, 10)}}</span>
+                  </p>
+                  <p :title="ca.title" class="two-line-ellipsis case-title">
+                    {{ca.title}}
+                  </p>
+                  <p class="case-text three-line-ellipsis">{{ca.summary}}</p>
+                  <p class="case-info">
+                    <interactBar :type="3" :readonly="true" :data="ca" :shares="false" :views="false"></interactBar>
+                  </p>
+                </div>
+                <div class="case-inter">
+                  <div>
+                    <authorInfo :avatar="ca.authorInfo.avatar" :info="ca.authorInfo.orgInfo" :name="ca.authorInfo.name"
+                      :sex="ca.authorInfo.sex"></authorInfo>
+                  </div>
+                  <div class="interact-bar-index"
+                    style="font-size: 12px;color: #6E7B84;display: flex;line-height: 30px;">
+                    <interactBar :type="3" :readonly="true" :comments="false" :praises="false" :favorites="false"
+                      :data="ca" :shares="false" :views="true"></interactBar>人观看
+                  </div>
+                  <!-- -->
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-        <div>
-          <div style="margin-top:60px" class="ranking-card portal-right-box list-bg">
-                <p class="portal-title-one" style="padding-bottom:12px">案例排行榜</p>
-                <ul class="case-index-list">
-                    <li v-for="(item, index) in Popularity" :key="index" class="title-line-ellipsis" style="cursor: pointer;margin-top:30px;line-height: 22px;">
-                        <span class="portal-right-text orange-one">
-                          <img :src="getPic(index)" alt="">
-                        </span>
-                        <span class="portal-title-desc" style="font-size: 14px;">{{ item.title }}</span>
-                   </li>
-                </ul>
-              </div>
+        <div class="xcontent2-minor">
+          <div class="portal-ranking ranking-bg" style="margin-top:60px">
+            <p class="ranking-title">案例排行榜</p>
+            <ul class="xindex-ranking-case">
+              <li class="xindex-ranking-li title-line-ellipsis" v-for="(item, index) in Popularity" :key="index" style="line-height: 22px;">
+                <span class="portal-right-text orange-one">
+                  <img :src="getPic(index)" alt="">
+                </span>
+                <span class="portal-title-desc two-line-ellipsis" style="font-size: 14px;">{{ item.title }}</span>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
       <!-- 推荐文章 -->
-      <div class="modules">
-        <div>
+      <div class="modules xcontent2">
+        <div class="xcontent2-main">
           <div class="modules-title">
             <span class="modules-text">推荐文章</span>
             <span class="quyer-tag">
-                <a :class="articleList.orderType == 2 ? 'current' : ''" @click="changeArticleOrder(2)">最热</a>
-                <a :class="articleList.orderType == 1 ? 'current' : ''" @click="changeArticleOrder(1)">最新</a>
+              <a :class="articleList.orderType == 2 ? 'current' : ''" @click="changeArticleOrder(2)">最热</a>
+              <a :class="articleList.orderType == 1 ? 'current' : ''" @click="changeArticleOrder(1)">最新</a>
+            </span>
+            <span class="more">
+              <router-link to="/article">查看更多</router-link>
             </span>
-            <span class="more"><router-link to="/article">查看更多</router-link></span>
           </div>
           <div class="modules-list">
             <div class="article-card boe-article-index" style="display: flex;">
               <!-- 首张 -->
               <div class="article-card-left" v-if="articleList && articleList.first && articleList.first.id">
                 <div class="article-card-box">
-                  <a :href="`${webBaseUrl}/article/detail?id=${articleList.first.id}`" style="font-weight: 700;font-size: 20px;">
+                  <a :href="`${webBaseUrl}/article/detail?id=${articleList.first.id}`"
+                    style="font-weight: 700;font-size: 20px;">
                     <div class="article-info-image-box">
                       <article-image height="100%" width="100%" :article="articleList.first"></article-image>
                     </div>
-                      <div class="article-info">
-                        <div class="article-info-title " style="margin-top:10px">
-                          <div class="one-line-ellipsis">
-                            <span style="font-weight: 600;font-size: 16px;word-break:break-all;color: #00253E;">{{ articleList.first.title }}</span>
-                          </div>
+                    <div class="article-info">
+                      <div class="article-info-title " style="margin-top:10px">
+                        <div class="one-line-ellipsis">
+                          <span
+                            style="font-weight: 600;font-size: 16px;word-break:break-all;color: #00253E;">{{ articleList.first.title }}</span>
                         </div>
-                        <div class="article-info-index-summary index-tive-line-ellipsis" style="font-weight: 400;margin-top:14px;word-break:break-all;">{{ articleList.first.summary }}</div>
                       </div>
+                      <div class="article-info-index-summary index-tive-line-ellipsis"
+                        style="font-weight: 400;margin-top:14px;word-break:break-all;">{{ articleList.first.summary }}
+                      </div>
+                    </div>
                   </a>
                   <div>
 
                   </div>
-                  <div class="article-info-time" style="font-size: 14px;color: #6E7B84;display:flex;justify-content: space-between;margin-top:16px">
-                    <span >{{ articleList.first && articleList.first.sysCreateTime && articleList.first.sysCreateTime.substring(0, 10) }}</span>
+                  <div class="article-info-time"
+                    style="font-size: 14px;color: #6E7B84;display:flex;justify-content: space-between;margin-top:16px">
+                    <span>{{ articleList.first && articleList.first.sysCreateTime && articleList.first.sysCreateTime.substring(0, 10) }}</span>
                     <span>查看详情</span>
                   </div>
                   <div class="article-other-info" style="margin-top:17px">
                     <div>
-                      <author-img :avatar="articleList.first.authorInfo.avatar" :aid="articleList.first.authorInfo.aid" :sex="articleList.first.authorInfo.sex"></author-img>
+                      <author-img :avatar="articleList.first.authorInfo.avatar" :aid="articleList.first.authorInfo.aid"
+                        :sex="articleList.first.authorInfo.sex"></author-img>
+                    </div>
+                    <div style="margin-top:5px">
+                      <interactBar :type="2" :readonly="true" :data="articleList.first" :views="false" :shares="false">
+                      </interactBar>
                     </div>
-                    <div style="margin-top:5px"><interactBar :type="2" :readonly="true" :data="articleList.first" :views="false" :shares="false"></interactBar></div>
                   </div>
                 </div>
               </div>
@@ -237,1458 +261,1611 @@
                 <div class="article-card-box" v-for="article in articleList.list" :key="article.id">
                   <div class="article-li">
                     <div class="article-img" v-if="article.coverurl != ''">
-                      <a :href="`${webBaseUrl}/article/detail?id=${article.id}`" style="font-weight: 700;font-size: 20px;">
+                      <a :href="`${webBaseUrl}/article/detail?id=${article.id}`"
+                        style="font-weight: 700;font-size: 20px;">
                         <el-image style="width:100%;height:100%" :src="fileBaseUrl + article.coverurl"></el-image>
                       </a>
                     </div>
-                      <div class="article-right">
-                        <a :href="`${webBaseUrl}/article/detail?id=${article.id}`" style="font-weight: 700;font-size: 20px;">
-                          <p class="article-info-title index-one-line-ellipsis">{{ article.title }}</p>
-                          <p class="article-info-summary two-line-ellipsis">{{ article.summary }}</p>
-                        </a>
-                        <div class="article-bottom">
-                          <div style="display:flex">
-                            <author-img :avatar="article.authorInfo.avatar" :aid="article.authorInfo.aid" :sex="article.authorInfo.sex"></author-img>
-                            <span style="color: #6E7B84;font-size: 14px;margin:6px 13px 0 10px;">{{article.authorInfo.name}}</span>
-                            <interactBar :type="2" :readonly="true" :data="article" :views="false"></interactBar>
-                          </div>
-                          <div><span class="article-info-time">{{ article.sysCreateTime.substring(0, 10) }}</span></div>
+                    <div class="article-right">
+                      <a :href="`${webBaseUrl}/article/detail?id=${article.id}`"
+                        style="font-weight: 700;font-size: 20px;">
+                        <p class="article-info-title index-one-line-ellipsis">{{ article.title }}</p>
+                        <p class="article-info-summary two-line-ellipsis">{{ article.summary }}</p>
+                      </a>
+                      <div class="article-bottom">
+                        <div style="display:flex">
+                          <author-img :avatar="article.authorInfo.avatar" :aid="article.authorInfo.aid"
+                            :sex="article.authorInfo.sex"></author-img>
+                          <span
+                            style="color: #6E7B84;font-size: 14px;margin:6px 13px 0 10px;">{{article.authorInfo.name}}</span>
+                          <interactBar :type="2" :readonly="true" :data="article" :views="false"></interactBar>
                         </div>
+                        <div><span class="article-info-time">{{ article.sysCreateTime.substring(0, 10) }}</span></div>
                       </div>
+                    </div>
                   </div>
-
-
-                  <!-- <div class="article-info-box">
-                    <div class="article-info">
-                      <div class="article-body" style="display:flex;">
-                        <div style="flex: 1;">
-                          <a :href="`${webBaseUrl}/article/detail?id=${article.id}`" style="font-weight: 700;font-size: 20px;">
-                            <div class="article-info-title">
-                              <div class="two-line-ellipsis">
-                                <span style="font-weight: 600;font-size: 16px;word-break:break-all;color: #00253E;">{{ article.title }}</span>
-                              </div> -->
-                              <!-- <div> -->
-                                <!-- <span class="article-info-time">{{ article.sysCreateTime.substring(0, 10) }}</span> -->
-                              <!-- </div> -->
-                            <!-- </div>
-                            <div>
-                              <div class="two-line-ellipsis" style="font-weight: 400;font-size: 14px;color: #6E7B84;word-break:break-all;">{{ article.summary }}</div>
-                            </div>
-                          </a> -->
-                          <!-- <div class="article-other-info" style="margin-top:15px">
-                            <div><authorInfo :avatar="article.authorInfo.avatar" :name="article.authorInfo.name" :sex="article.authorInfo.sex"></authorInfo></div>
-                            <div><interactBar :type="2" :readonly="true" :data="article" :views="false"></interactBar></div>
-                          </div>
-                        </div> -->
-                        <!-- <div v-if="article.coverurl != ''" class="article-image"><el-image style="width:100%;height:100%" :src="fileBaseUrl + article.coverurl"></el-image></div>
-                      </div> -->
-                    <!-- </div> -->
-                  <!-- </div> -->
                 </div>
               </div>
             </div>
           </div>
         </div>
         <!--内容块-->
-       <div style="margin-top:60px">
-        <!-- 排行榜位置 -->
-        <div class="portal-right-box art-bgimg" style="background-color:#fff;" >
-                <p class="portal-title-one" style="padding-bottom:12px" >文章排行榜</p>
-                 <ul class="anking-index-list">
-                      <li v-for="(item, index) in ankingList" :key="index" style="margin-top:30px;line-height: 22px;cursor: pointer;">
-                        <span class="portal-right-text orange-one">
-                          <img :src="getPic(index)" alt="">
-                        </span>
-                        <span class="portal-index-summary">{{ item.title }}</span>
-                      </li>
-                    </ul>
-              </div>
-       </div>
-      </div>
-      <!-- 推荐问答 -->
-      <div class="modules">
-         <div>
-             <!--内容块-->
-           <div class="modules-title">
-            <span class="modules-text">推荐问答</span>
-            <span class="quyer-tag">
-                <a :class="qaList.orderType == 'praises' ? 'current' : ''" @click="changeQaOrder('praises')">最热</a>
-              <a :class="qaList.orderType == '' ? 'current' : ''" @click="changeQaOrder('')">最新</a>
-
-            </span>
-            <span class="more"><router-link to="/qa">查看更多</router-link></span>
-          </div>
-          <el-row class="modules-list">
-            <!--内容列表内容-->
-            <ul class="qa-box">
-              <li class="qa-card boe-qa-index" v-for="qa in qaList.list" :key="qa.id">
-                  <p class="qa-top"><span>{{qa.views}}正在关注</span><span>{{ qa.sysCreateTime.substring(0, 10) }}</span></p>
-                  <div class="qa-center">
-                    <p class="one-line-ellipsis portal-index-title" style="color:#181818;">{{ qa.title }}</p>
-                    <p class="boe-qa-sum two-line-ellipsis" style="color:#6E7B84;">{{ qa.content }}</p>
-                    <p class="qa-views" @click="jumpRouter(qa)">查看详情</p>
-                  </div>
-                  <div class="qa-char">
-                    <author-img :avatar="qa.authorInfo.avatar" :aid="qa.authorInfo.aid" :sex="qa.authorInfo.sex"></author-img>
-                    <div>
-                      <p class="info-name">{{qa.authorInfo.name}}</p>
-                      <p class="info-bar"><interactBar :type="4" :readonly="true" :data="qa" :comments="false" :answers="true" :shares="false" :praises="false" :views="false"></interactBar></p>
-                    </div>
-                  </div>
+        <div class="xcontent2-minor">
+          <div style="margin-top:60px" class="portal-ranking ranking-bg">
+          <!-- 排行榜位置 -->
+            <p class="ranking-title">文章排行榜</p>
+            <ul class="xindex-ranking-article">
+              <li class="xindex-ranking-li" v-for="(item, index) in ankingList" :key="index" style="line-height: 22px;">
+                <span class="portal-right-text orange-one">
+                  <img :src="getPic(index)" alt="">
+                </span>
+                <span class="portal-index-summary two-line-ellipsis">{{ item.title }}</span>
               </li>
             </ul>
-          </el-row>
-         </div>
-         <div style="margin-top:74px">
-          <!-- 排行榜 -->
-          <div class="portal-right-box list-bg">
-                <p class="portal-title-one" style="padding-bottom:12px">问答排行榜</p>
-                <ul class="qa-index-qa">
-                  <li v-for="(item, index) in answersList" :key="index" style="margin-top:30px;line-height: 22px;cursor: pointer;">
-                    <span class="portal-right-text orange-one">
-                      <img :src="getPic(index)" alt="">
-                    </span>
-                     <span class="portal-index-summary">{{ item.title }}</span>
-                  </li>
-                </ul>
+          </div>
+        </div>
+      </div>
+      <!-- 推荐问答 -->
+      <div class="modules xcontent2">
+        <div class="xcontent2-main">
+          <!--内容块-->
+          <div class="modules-title">
+            <span class="modules-text">推荐问答</span>
+            <span class="quyer-tag">
+              <a :class="qaList.orderType == 'praises' ? 'current' : ''" @click="changeQaOrder('praises')">最热</a>
+              <a :class="qaList.orderType == '' ? 'current' : ''" @click="changeQaOrder('')">最新</a>
+            </span>
+            <span class="more">
+              <router-link to="/qa">查看更多</router-link>
+            </span>
+          </div>
+          <div class="modules-list">
+            <!--内容列表内容-->
+            <div class="xindex-qa" v-for="qa in qaList.list" :key="qa.id">
+              <div class="qa-card boe-qa-index" >
+                <p class="qa-top"><span>{{qa.views}}正在关注</span><span>{{ qa.sysCreateTime.substring(0, 10) }}</span></p>
+                <div class="qa-center">
+                  <p class="one-line-ellipsis portal-index-title" style="color:#181818;">{{ qa.title }}</p>
+                  <p class="boe-qa-sum two-line-ellipsis" style="color:#6E7B84;">{{ qa.content }}</p>
+                  <p class="qa-views" @click="jumpRouter(qa)">查看详情</p>
+                </div>
+                <div class="qa-char">
+                  <author-img :avatar="qa.authorInfo.avatar" :aid="qa.authorInfo.aid" :sex="qa.authorInfo.sex">
+                  </author-img>
+                  <div>
+                    <p class="info-name">{{qa.authorInfo.name}}</p>
+                    <p class="info-bar">
+                      <interactBar :type="4" :readonly="true" :data="qa" :comments="false" :answers="true"
+                        :shares="false" :praises="false" :views="false"></interactBar>
+                    </p>
+                  </div>
+                </div>
+              </div>
             </div>
-         </div>
+          </div>
+        </div>
+        <div  class="xcontent2-minor">
+          <!-- 排行榜 -->
+          <div class="portal-ranking ranking-bg" style="margin-top:60px">
+            <p class="ranking-title">问答排行榜</p>
+            <ul class="xindex-ranking-qa">
+              <li class="xindex-ranking-li" v-for="(item, index) in answersList" :key="index" style="line-height: 22px;">
+                <span class="portal-right-text orange-one">
+                  <img :src="getPic(index)" alt="">
+                </span>
+                <span class="portal-index-summary two-line-ellipsis">{{ item.title }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
       </div>
     </div>
-    <div><a href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course">&nbsp;&nbsp;&nbsp;</a></div>
+    <div><a href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course">&nbsp;&nbsp;&nbsp;</a>
+    </div>
     <portal-footer></portal-footer>
     <portalFloatTools></portalFloatTools>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
-import portalHeader from '@/components/PortalHeader.vue';
-import portalFooter from '@/components/PortalFooter.vue';
-import portalFloatTools from '@/components/PortalFloatTools.vue';
-import authorInfo from '@/components/Portal/authorInfo.vue';
-import apiCourse from '@/api/modules/coursePortal.js';
-import apiCase from '@/api/modules/cases.js';
-import apiArticle from '@/api/modules/article.js';
-import apiQa from '@/api/modules/qa.js';
-import apiUser from '@/api/system/user.js';
-import apiCoursePortal from '@/api/modules/coursePortal.js';
-import interactBar from '@/components/Portal/interactBar.vue';
-import ad from '@/components/Portal/adFloat.vue';
-import interactRowBar from '@/components/Portal/interactRowBar.vue';
-import courseImage from '@/components/Course/courseImage.vue';
-import articleImage from '@/components/Article/articleImage.vue';
-import { toScore,cutFullName} from '@/utils/tools.js';
-import { swiper, swiperSlide } from 'vue-awesome-swiper';
-import apiPlace from "@/api/phase2/place.js"
-import AuthorImg from '@/components/Portal/authorImg.vue';
-import apiStart from '@/api/phase2/stat.js'
-import apiIndex from '@/api/phase2/index.js'
+  import {
+    mapGetters
+  } from 'vuex';
+  import portalHeader from '@/components/PortalHeader.vue';
+  import portalFooter from '@/components/PortalFooter.vue';
+  import portalFloatTools from '@/components/PortalFloatTools.vue';
+  import authorInfo from '@/components/Portal/authorInfo.vue';
+  import apiCourse from '@/api/modules/coursePortal.js';
+  import apiCase from '@/api/modules/cases.js';
+  import apiArticle from '@/api/modules/article.js';
+  import apiQa from '@/api/modules/qa.js';
+  import apiUser from '@/api/system/user.js';
+  import apiCoursePortal from '@/api/modules/coursePortal.js';
+  import interactBar from '@/components/Portal/interactBar.vue';
+  import ad from '@/components/Portal/adFloat.vue';
+  import interactRowBar from '@/components/Portal/interactRowBar.vue';
+  import courseImage from '@/components/Course/courseImage.vue';
+  import articleImage from '@/components/Article/articleImage.vue';
+  import {
+    toScore,
+    cutFullName
+  } from '@/utils/tools.js';
+  import {
+    swiper,
+    swiperSlide
+  } from 'vue-awesome-swiper';
+  import apiPlace from "@/api/phase2/place.js"
+  import AuthorImg from '@/components/Portal/authorImg.vue';
+  import apiStart from '@/api/phase2/stat.js'
+  import apiIndex from '@/api/phase2/index.js'
 
-export default {
-  name: 'index',
-  components: {AuthorImg, portalHeader,ad, portalFooter, articleImage, portalFloatTools, authorInfo, interactRowBar, interactBar, courseImage },
-  computed: {
-    ...mapGetters(['userInfo'])
-  },
-  data() {
-    return {
-      userData:{},
-      userInfo:{},
-      ankingList:[],
-      answersList:[],
-      Popularity:[],
-      scorelist:[],
-       resonimg:[],
-      swiperOption: {
-    autoplay: {
-       disableOnInteraction: false ,
-       delay: 2000,
-       },
-   	 speed: 1000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
-   	 loop:true, //循环切换
-      peed: 300,//循环速度
-  	 scrollbar: '.swiper-scrollbar',
-
-   	pagination: {
-    	el: '.swiper-pagination',
-    	// type : 'progressbar', //分页器形状
-    	clickable :true, //点击分页器的指示点分页器会控制Swiper切换
-  	 },
-  	 navigation: {
-   	 nextEl: '.swiper-button-next',
-   	 prevEl: '.swiper-button-prev',
- 	  },
-   },
-
-      couname:'',
-      isNext: true,
-      pageIndex: 1,
-      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
-      toScore,
-      courseList: {
-        num: 12,
-        orderType: 2,
-        list: []
-      },
-      caseList: {
-        num: 3,
-        orderType: 2,
-        list: []
-      },
-      articleList: {
-        num: 4,
-        orderType: 2,
-        first: { id: '', authorInfo: {} },
-        list: []
-      },
-      qaList: {
-        num: 4,
-        orderType: 'praises',
-        list: []
-      }
-    };
-  },
-  mounted() {
-    this.userInfo = this.$store.getters.userInfo;
-    this.getCourseData(1);
-    this.getCaseData();
-    this.getArticleData();
-    this.getQaData();
-    this.couresreso();
-    this.getScoreList();
-    this.getPopularity();
-    this.getAnkingData();
-    this.getLevel();
-    this.getQaAnswers();
-  },
-  computed: {
-
-  swiper() {
-   return this.$refs.mySwiper.swiper
-  }
-
-  },
-  created(){
-   // undefined
-  //   this.$nextTick(() => {
-	// 	console.log(this.$refs.bannimg)  //获取到正确元素
-	// })
-  },
-  methods: {
-    getPic(index) {
-     return `/images/listblue0${index+1}.png`
+  export default {
+    name: 'index',
+    components: {
+      AuthorImg,
+      portalHeader,
+      ad,
+      portalFooter,
+      articleImage,
+      portalFloatTools,
+      authorInfo,
+      interactRowBar,
+      interactBar,
+      courseImage
     },
-    getLevel(){//获取经验值和等级
-          apiStart.getUserStatTotalInfo(this.userInfo.aid).then(res=>{
-            if(res.status == 200) {
-               this.userData = res.result;
-            }
-          });
+    computed: {
+      ...mapGetters(['userInfo'])
+    },
+    data() {
+      return {
+        userData: {},
+        userInfo: {},
+        ankingList: [],
+        answersList: [],
+        Popularity: [],
+        scorelist: [],
+        resonimg: [],
+        swiperOption: {
+          autoplay: {
+            disableOnInteraction: false,
+            delay: 2000,
+          },
+          speed: 1000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
+          loop: true, //循环切换
+          peed: 300, //循环速度
+          scrollbar: '.swiper-scrollbar',
+
+          pagination: {
+      	     el: '.swiper-pagination',
+            // type : 'progressbar', //分页器形状
+            clickable: true, //点击分页器的指示点分页器会控制Swiper切换
+          },
+          navigation: {
+   	        nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev',
+          },
         },
-    getQaAnswers() {
-      apiIndex.qaAnswers(10).then(res=>{
-        if (res.status == 200) {
-          this.answersList = res.result;
-        }
-      })
 
-    },
-    getAnkingData() {//  文章排行榜
-      apiIndex.articleViews(7).then(res => {
-        if (res.status == 200) {
-          this.ankingList = res.result;
+        couname: '',
+        isNext: true,
+        pageIndex: 1,
+        fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
+        toScore,
+        courseList: {
+          num: 12,
+          orderType: 2,
+          list: []
+        },
+        caseList: {
+          num: 3,
+          orderType: 2,
+          list: []
+        },
+        articleList: {
+          num: 4,
+          orderType: 2,
+          first: {
+            id: '',
+            authorInfo: {}
+          },
+          list: []
+        },
+        qaList: {
+          num: 4,
+          orderType: 'praises',
+          list: []
         }
-      });
-    },
-    getPopularity() {//案例排行榜
-      apiCase.queryPraises(10).then(res => {
-        if (res.status == 200) {
-          this.Popularity = res.result;
-          // console.log(this.Popularity)
-        }
-      });
-    },
-    getScoreList() {//课程排行榜
-      apiCourse.scorelist(10).then(res => {
-        if (res.status == 200) {
-          res.result.forEach(item=>{
-            if(item.publishTime != '') {
-             let time = item.publishTime.split('-');
-             item.publishTime = `${time[0]}年${time[1]}月${time[2]}日`
-            }
-          })
-          this.scorelist = res.result;
-        }
-      });
-    },
-    // bgfun(){
-    //  console.log(this.$refs.bannimg[0]);
-    //  this.$nextTick(() => {
-		// 		console.log(this.$refs.bannimg[0])
-		// 	})
-    // },
-     couresreso(){
-      let key = 'index';
-      apiPlace.detail(key).then(res=>{
-        let lmj =  JSON.parse(res.result.content)
-        this.resonimg = lmj
-        // console.log(this.resonimg)
-      })
-    },
-    jumUX(){
-     window.open('https://m.qingxuetang.com/x/?appId=qxtcorp306130','_blank');
-    },
-    toCourseDetail(item) {
-      if (item.type == 10) {
-        return this.webBaseUrl + '/course/micro?id=' + item.id;
-      } else if (item.type == 20) {
-        return this.webBaseUrl + '/course/detail?id=' + item.id;
-      }
-      return '';
-    },
-    orderTypeFilter(val) {
-      this.courseList.orderType = val;
-      this.pageIndex = 1;
-      this.getCourseData();
-    },
-    nextPage() {
-      this.pageIndex += 1;
-      if (this.isNext) {
-        this.getCourseData(this.pageIndex);
-      }
-    },
-    getCourseData(pageIndex) {
-      this.isNext = false;
-      let { orderType, num } = this.courseList;
-      let course = {
-        pageSize: 5,
-        device:1,
-        orderField: orderType == 1 ? '' : 'studys',
-        orderAsc: false,
-        topOrder:true,
-        pageIndex: pageIndex
       };
-
-      apiCoursePortal.pageList(course).then(res => {
-        if (res.status == 200 && res.result.list.length > 0) {
-          let courseIds = [];
-          res.result.list.forEach(item => {
-            item.authorInfo = { aid: '', name: '', orgInfo: '', avatar: '', code: '' ,sex:null};
-            courseIds.push(item.id);
-          });
-          this.loadCouserTeacher(res.result.list, courseIds);
-          this.courseList.list=res.result.list;
-          this.couname = res.result.list.name;
-          if(res.result.count - pageIndex * num < 8) {
-            this.pageIndex = 0;
-          }
-          this.isNext = true;
-          // }
-        } else {
-          console.log('加载课程信息失败:' + res.error);
-        }
-
-      });
-
-
-      // apiCourse.list({orderType,num,device:1}).then(res => {
-      //     if(res.status==200){
-      //       if(res.result.length>0){
-      //         let courseIds=[];
-      //         res.result.forEach(item=>{
-      //           item.authorInfo={aid:'',name:'',orgInfo:'',avatar:'',code:''};
-      //           courseIds.push(item.id);
-      //         })
-      //         this.loadCouserTeacher(res.result,courseIds);
-      //         this.courseList.list=res.result;
-      //       }
-      //     }else{
-      //       console.log('加载课程信息失败:'+res.error);
-      //     }
-      //   })
     },
-    changeCaseOrder(val) {
-      this.caseList.orderType = val;
+    mounted() {
+      this.userInfo = this.$store.getters.userInfo;
+      this.getCourseData(1);
       this.getCaseData();
-    },
-    getCaseData() {
-      apiIndex.cases(this.caseList.orderType).then(res => {
-        if (res.status == 200) {
-          if (res.result.length > 0) {
-            let userIds = [];
-            res.result.forEach(item => {
-              item.authorInfo = { aid: '', name: '', orgInfo: '', avatar: '', code: '',sex:null };
-
-              if (item.authorId && item.authorId != '') {
-                userIds.push(item.authorId);
-              }
-            });
-            this.caseList.list = res.result;
-            this.loadCaseAuthorInfo(res.result, userIds);
-          }
-          // this.caseList.list = res.result;
-        } else {
-          console.log('加载案例错误：' + res.error);
-        }
-      });
-    },
-    loadCaseAuthorInfo(list, ids) {
-      //加载作者信息，头像，机构信息
-      if (ids.length == 0) {
-        return;
-      }
-      const noReapetIds = [...new Set(ids)];
-      apiUser.getByIds(ids).then(res => {
-        if (res.status == 200) {
-          list.forEach((item, index) => {
-            res.result.some(author => {
-              if (author.aid == item.authorId) {
-                author.orgInfo=cutFullName(author.orgInfo,1);
-                item.authorInfo = author;
-
-                return true;
-              } else {
-                return false;
-              }
-            });
-          });
-        } else {
-          console.log('加载用户信息失败:' + res.error);
-          //this.$message.error(res.message);
-        }
-      });
-    },
-    getArticleData() {
-      let $this = this;
-      this.articleList.list = [];
-      apiIndex.articlelist(this.articleList.orderType).then(res => {
-        if (res.status == 200) {
-          if (res.result.length > 0) {
-            let userIds = [];
-            res.result.forEach((item, idx) => {
-              item.authorInfo = { aid: '', name: '', orgInfo: '', avatar: '', code: '' ,sex:null,};
-              userIds.push(item.sysCreateAid);
-              if (idx == 0) {
-                $this.articleList.first = item;
-              } else {
-                $this.articleList.list.push(item);
-              }
-            });
-            console.log(res.result,'res.result');
-            this.loadAuthorInfo(res.result, userIds);
-          }
-        } else {
-          console.log('加载文章错误：' + res.error);
-        }
-      });
-    },
-    changeArticleOrder(val) {
-      this.articleList.orderType = val;
       this.getArticleData();
-    },
-    getQaData() {
-      let params = {
-        pageSize: this.qaList.num,
-        orderAsc: false,
-        orderField: this.qaList.orderType
-      };
-      // if (this.qaList.orderType == 2) {
-      //   params.orderField = 'praises';
-      // }
-      apiQa.indexList(params).then(res => {
-        if (res.status == 200) {
-          if (res.result.length > 0) {
-            let userIds = [];
-            res.result.forEach(item => {
-              item.authorInfo = { aid: '', name: '', orgInfo: '', avatar: '', code: '',sex:null, };
-              userIds.push(item.sysCreateAid);
-            });
-            this.qaList.list = res.result;
-            this.loadAuthorInfo(res.result, userIds);
-          }
-        } else {
-          console.log('加载问答错误：' + res.error);
-        }
-        //console.log(res)
-      });
-    },
-    changeQaOrder(val) {
-      this.qaList.orderType = val;
       this.getQaData();
+      this.couresreso();
+      this.getScoreList();
+      this.getPopularity();
+      this.getAnkingData();
+      this.getLevel();
+      this.getQaAnswers();
     },
-    loadCouserTeacher(list, ids) {
-      let that = this;
-      // 先查课程关联教师iD
-      apiCourse.getTeacherByCourseIDs(ids).then(cres => {
-        if (cres.status == 200) {
-          let userIds = [];
-          list.forEach((item, index) => {
-            cres.result.some(courseTeahcer => {
-              if (courseTeahcer.courseId == item.id) {
-                if (courseTeahcer.teacherIds) {
-                  userIds.push(courseTeahcer.teacherIds[0]);
-                  item.authorInfo.aid = courseTeahcer.teacherIds[0];
-                  item.authorInfo.name = courseTeahcer.names[0];
-                  if(item.authorInfo.name=='BOE教师'){
-                    item.authorInfo.name='';
-                  }
-                }
-                return true;
-              } else {
-                return false;
-              }
-            });
-          });
-          //that.loadCourseAuthorInfo(list, userIds);
-        }
-      });
-    },
-    loadCourseAuthorInfo(list, ids) {
-      //加载作者信息，头像，机构信息
-      if (ids.length == 0) {
-        return;
-      }
-      const noReapetIds = [...new Set(ids)];
-      apiUser.getByIds(ids).then(res => {
-        if (res.status == 200) {
-          list.forEach((item, index) => {
-            res.result.some(author => {
-              if (author.aid == item.authorInfo.aid) {
-                item.authorInfo = author;
+    computed: {
 
-                return true;
-              } else {
-                return false;
-              }
-            });
-          });
-        } else {
-          console.log('加载用户信息失败:' + res.error);
-        }
-      });
-    },
-    loadAuthorInfo(list, ids) {
-      //加载作者信息，头像，机构信息
-      if (ids.length == 0) {
-        return;
+      swiper() {
+        return this.$refs.mySwiper.swiper
       }
-      const noReapetIds = [...new Set(ids)];
-      apiUser.getByIds(ids).then(res => {
-        if (res.status == 200) {
-          list.forEach((item, index) => {
-            res.result.some(author => {
-              if (author.aid == item.sysCreateAid) {
-                item.authorInfo = author;
-                return true;
-              } else {
-                return false;
-              }
-            });
-          });
-        } else {
-          console.log('加载用户信息失败:' + res.error);
-        }
-      });
+
     },
-    jumpRouter(item) {
-      this.$router.push({ path: '/qa/answer', query: { id: item.id } });
+    created() {
+      // undefined
+      //   this.$nextTick(() => {
+      // 	console.log(this.$refs.bannimg)  //获取到正确元素
+      // })
+    },
+    methods: {
+      getPic(index) {
+        return `/images/listblue0${index+1}.png`
+      },
+      getLevel() { //获取经验值和等级
+        apiStart.getUserStatTotalInfo(this.userInfo.aid).then(res => {
+          if (res.status == 200) {
+            this.userData = res.result;
+          }
+        });
+      },
+      getQaAnswers() {
+        apiIndex.qaAnswers(10).then(res => {
+          if (res.status == 200) {
+            this.answersList = res.result;
+          }
+        })
+
+      },
+      getAnkingData() { //  文章排行榜
+        apiIndex.articleViews(7).then(res => {
+          if (res.status == 200) {
+            this.ankingList = res.result;
+          }
+        });
+      },
+      getPopularity() { //案例排行榜
+        apiCase.queryPraises(10).then(res => {
+          if (res.status == 200) {
+            this.Popularity = res.result;
+            // console.log(this.Popularity)
+          }
+        });
+      },
+      getScoreList() { //课程排行榜
+        apiCourse.scorelist(10).then(res => {
+          if (res.status == 200) {
+            res.result.forEach(item => {
+              if (item.publishTime != '') {
+                let time = item.publishTime.split('-');
+                item.publishTime = `${time[0]}年${time[1]}月${time[2]}日`
+              }
+            })
+            this.scorelist = res.result;
+          }
+        });
+      },
+      // bgfun(){
+      //  console.log(this.$refs.bannimg[0]);
+      //  this.$nextTick(() => {
+      // 		console.log(this.$refs.bannimg[0])
+      // 	})
+      // },
+      couresreso() {
+        let key = 'index';
+        apiPlace.detail(key).then(res => {
+          let lmj = JSON.parse(res.result.content)
+          this.resonimg = lmj
+          // console.log(this.resonimg)
+        })
+      },
+      jumUX() {
+        window.open('https://m.qingxuetang.com/x/?appId=qxtcorp306130', '_blank');
+      },
+      toCourseDetail(item) {
+        if (item.type == 10) {
+          return this.webBaseUrl + '/course/micro?id=' + item.id;
+        } else if (item.type == 20) {
+          return this.webBaseUrl + '/course/detail?id=' + item.id;
+        }
+        return '';
+      },
+      orderTypeFilter(val) {
+        this.courseList.orderType = val;
+        this.pageIndex = 1;
+        this.getCourseData();
+      },
+      nextPage() {
+        this.pageIndex += 1;
+        if (this.isNext) {
+          this.getCourseData(this.pageIndex);
+        }
+      },
+      getCourseData(pageIndex) {
+        this.isNext = false;
+        let {
+          orderType,
+          num
+        } = this.courseList;
+        let course = {
+          pageSize: 5,
+          device: 1,
+          orderField: orderType == 1 ? '' : 'studys',
+          orderAsc: false,
+          topOrder: true,
+          pageIndex: pageIndex
+        };
+
+        apiCoursePortal.pageList(course).then(res => {
+          if (res.status == 200 && res.result.list.length > 0) {
+            let courseIds = [];
+            res.result.list.forEach(item => {
+              item.authorInfo = {
+                aid: '',
+                name: '',
+                orgInfo: '',
+                avatar: '',
+                code: '',
+                sex: null
+              };
+              courseIds.push(item.id);
+            });
+            this.loadCouserTeacher(res.result.list, courseIds);
+            this.courseList.list = res.result.list;
+            this.couname = res.result.list.name;
+            if (res.result.count - pageIndex * num < 8) {
+              this.pageIndex = 0;
+            }
+            this.isNext = true;
+            // }
+          } else {
+            console.log('加载课程信息失败:' + res.error);
+          }
+
+        });
+
+
+        // apiCourse.list({orderType,num,device:1}).then(res => {
+        //     if(res.status==200){
+        //       if(res.result.length>0){
+        //         let courseIds=[];
+        //         res.result.forEach(item=>{
+        //           item.authorInfo={aid:'',name:'',orgInfo:'',avatar:'',code:''};
+        //           courseIds.push(item.id);
+        //         })
+        //         this.loadCouserTeacher(res.result,courseIds);
+        //         this.courseList.list=res.result;
+        //       }
+        //     }else{
+        //       console.log('加载课程信息失败:'+res.error);
+        //     }
+        //   })
+      },
+      changeCaseOrder(val) {
+        this.caseList.orderType = val;
+        this.getCaseData();
+      },
+      getCaseData() {
+        apiIndex.cases(this.caseList.orderType).then(res => {
+          if (res.status == 200) {
+            if (res.result.length > 0) {
+              let userIds = [];
+              res.result.forEach(item => {
+                item.authorInfo = {
+                  aid: '',
+                  name: '',
+                  orgInfo: '',
+                  avatar: '',
+                  code: '',
+                  sex: null
+                };
+
+                if (item.authorId && item.authorId != '') {
+                  userIds.push(item.authorId);
+                }
+              });
+              this.caseList.list = res.result;
+              this.loadCaseAuthorInfo(res.result, userIds);
+            }
+            // this.caseList.list = res.result;
+          } else {
+            console.log('加载案例错误：' + res.error);
+          }
+        });
+      },
+      loadCaseAuthorInfo(list, ids) {
+        //加载作者信息，头像，机构信息
+        if (ids.length == 0) {
+          return;
+        }
+        const noReapetIds = [...new Set(ids)];
+        apiUser.getByIds(ids).then(res => {
+          if (res.status == 200) {
+            list.forEach((item, index) => {
+              res.result.some(author => {
+                if (author.aid == item.authorId) {
+                  author.orgInfo = cutFullName(author.orgInfo, 1);
+                  item.authorInfo = author;
+
+                  return true;
+                } else {
+                  return false;
+                }
+              });
+            });
+          } else {
+            console.log('加载用户信息失败:' + res.error);
+            //this.$message.error(res.message);
+          }
+        });
+      },
+      getArticleData() {
+        let $this = this;
+        this.articleList.list = [];
+        apiIndex.articlelist(this.articleList.orderType).then(res => {
+          if (res.status == 200) {
+            if (res.result.length > 0) {
+              let userIds = [];
+              res.result.forEach((item, idx) => {
+                item.authorInfo = {
+                  aid: '',
+                  name: '',
+                  orgInfo: '',
+                  avatar: '',
+                  code: '',
+                  sex: null,
+                };
+                userIds.push(item.sysCreateAid);
+                if (idx == 0) {
+                  $this.articleList.first = item;
+                } else {
+                  $this.articleList.list.push(item);
+                }
+              });
+              console.log(res.result, 'res.result');
+              this.loadAuthorInfo(res.result, userIds);
+            }
+          } else {
+            console.log('加载文章错误：' + res.error);
+          }
+        });
+      },
+      changeArticleOrder(val) {
+        this.articleList.orderType = val;
+        this.getArticleData();
+      },
+      getQaData() {
+        let params = {
+          pageSize: this.qaList.num,
+          orderAsc: false,
+          orderField: this.qaList.orderType
+        };
+        // if (this.qaList.orderType == 2) {
+        //   params.orderField = 'praises';
+        // }
+        apiQa.indexList(params).then(res => {
+          if (res.status == 200) {
+            if (res.result.length > 0) {
+              let userIds = [];
+              res.result.forEach(item => {
+                item.authorInfo = {
+                  aid: '',
+                  name: '',
+                  orgInfo: '',
+                  avatar: '',
+                  code: '',
+                  sex: null,
+                };
+                userIds.push(item.sysCreateAid);
+              });
+              this.qaList.list = res.result;
+              this.loadAuthorInfo(res.result, userIds);
+            }
+          } else {
+            console.log('加载问答错误：' + res.error);
+          }
+          //console.log(res)
+        });
+      },
+      changeQaOrder(val) {
+        this.qaList.orderType = val;
+        this.getQaData();
+      },
+      loadCouserTeacher(list, ids) {
+        let that = this;
+        // 先查课程关联教师iD
+        apiCourse.getTeacherByCourseIDs(ids).then(cres => {
+          if (cres.status == 200) {
+            let userIds = [];
+            list.forEach((item, index) => {
+              cres.result.some(courseTeahcer => {
+                if (courseTeahcer.courseId == item.id) {
+                  if (courseTeahcer.teacherIds) {
+                    userIds.push(courseTeahcer.teacherIds[0]);
+                    item.authorInfo.aid = courseTeahcer.teacherIds[0];
+                    item.authorInfo.name = courseTeahcer.names[0];
+                    if (item.authorInfo.name == 'BOE教师') {
+                      item.authorInfo.name = '';
+                    }
+                  }
+                  return true;
+                } else {
+                  return false;
+                }
+              });
+            });
+            //that.loadCourseAuthorInfo(list, userIds);
+          }
+        });
+      },
+      loadCourseAuthorInfo(list, ids) {
+        //加载作者信息，头像，机构信息
+        if (ids.length == 0) {
+          return;
+        }
+        const noReapetIds = [...new Set(ids)];
+        apiUser.getByIds(ids).then(res => {
+          if (res.status == 200) {
+            list.forEach((item, index) => {
+              res.result.some(author => {
+                if (author.aid == item.authorInfo.aid) {
+                  item.authorInfo = author;
+
+                  return true;
+                } else {
+                  return false;
+                }
+              });
+            });
+          } else {
+            console.log('加载用户信息失败:' + res.error);
+          }
+        });
+      },
+      loadAuthorInfo(list, ids) {
+        //加载作者信息，头像，机构信息
+        if (ids.length == 0) {
+          return;
+        }
+        const noReapetIds = [...new Set(ids)];
+        apiUser.getByIds(ids).then(res => {
+          if (res.status == 200) {
+            list.forEach((item, index) => {
+              res.result.some(author => {
+                if (author.aid == item.sysCreateAid) {
+                  item.authorInfo = author;
+                  return true;
+                } else {
+                  return false;
+                }
+              });
+            });
+          } else {
+            console.log('加载用户信息失败:' + res.error);
+          }
+        });
+      },
+      jumpRouter(item) {
+        this.$router.push({
+          path: '/qa/answer',
+          query: {
+            id: item.id
+          }
+        });
+      }
     }
   }
-  }
 </script>
 
 <style scoped lang="scss">
+  .article-li {
+    display: flex;
+    width: 100%;
 
-    .article-li{
-      display: flex;
-      width: 100%;
-      .article-img{
+    .article-img {
+      // width: 252px;
+      // height: 142px;
+      border-radius: 4px;
+
+      // margin-right: 20px;
+      img {
         // width: 252px;
         // height: 142px;
         border-radius: 4px;
-        // margin-right: 20px;
-        img{
-          // width: 252px;
-          // height: 142px;
-          border-radius: 4px;
-        }
       }
-      .article-right{
-        width: 100%;
-        .article-info-title{
-          font-size: 16px;
-          font-weight: 600;
-          color: #00253E;
-          margin-bottom: 9px;
-          // width: 50%;
-        }
-        .article-info-summary{
-          // font-size: 14px;
-          font-weight: 400;
-          color: #6E7B84;
-          margin-bottom: 15px;
-        }
-        .article-bottom{
-          display: flex;
-          justify-content: space-between;
-         ::v-deep .uavatar{
-            // width: 32px;
-            // height: 32px;
-          }
-        }
-        .article-info-time{
-          font-size: 12px;
-          font-weight: 400;
-          color: #6E7B84;
-        }
-      }
-
     }
 
-//   ::v-deep .course-image-box :hover .el-image{
-//         // transition: all 0.5s;
-//         z-index: 999;
-//         position: absolute;
-//         top: -50px;
-//         left: -35px;
-//         width: 420px !important;
-//         height: 236px !important;
+    .article-right {
+      width: 100%;
 
-// }
-  .course-ran-bg{
+      .article-info-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #00253E;
+        margin-bottom: 9px;
+        // width: 50%;
+      }
+
+      .article-info-summary {
+        // font-size: 14px;
+        font-weight: 400;
+        color: #6E7B84;
+        margin-bottom: 15px;
+      }
+
+      .article-bottom {
+        display: flex;
+        justify-content: space-between;
+
+        ::v-deep .uavatar {
+          // width: 32px;
+          // height: 32px;
+        }
+      }
+
+      .article-info-time {
+        font-size: 12px;
+        font-weight: 400;
+        color: #6E7B84;
+      }
+    }
+
+  }
+
+  //   ::v-deep .course-image-box :hover .el-image{
+  //         // transition: all 0.5s;
+  //         z-index: 999;
+  //         position: absolute;
+  //         top: -50px;
+  //         left: -35px;
+  //         width: 420px !important;
+  //         height: 236px !important;
+
+  // }
+  .course-ran-bg {
     background: linear-gradient(180deg, #d7eaff 1%, #FAFAFA 24%);
   }
-  .personal-panel{
+
+  .personal-panel {
     position: absolute;
-    right: 172px;
-    top:105px;
-    width: 356px;
-    height: 370px;
-    background: rgba(0,0,0,0.39);
+    right: 8%;
+    top: 105px;
+    // background: url('/images/homeWu/personal-bgimg.png');
+    background: rgba($color: #fff, $alpha: 0.2);
     border-radius: 8px;
     z-index: 999;
     backdrop-filter: blur(10px);
-    padding: 38px 47px 31px 32px;
     text-align: center;
     color: #fff;
-    .personal-img{
+
+    .personal-img {
       width: 68px;
       height: 68px;
       margin: 0 auto;
-     ::v-deep .el-avatar{
+
+      ::v-deep .el-avatar {
         width: 68px;
         height: 68px;
       }
     }
-    .personal-name{
+
+    .personal-name {
       font-weight: 600;
       font-size: 18px;
       margin-top: 12px;
+      color: #333333;
     }
-    .personal-info{
+
+    .personal-info {
       font-size: 14px;
-      color: #C1C1C1;
+      color: #000000;
       margin-top: 10px;
     }
-    .personal-box{
-      width: 240px;
-      height: 60px;
-      background: rgba(0,0,0,0.39);
-      border-radius: 8px;
-      margin-left: 16px;
-      margin-top: 20px;
-      margin-bottom: 28px;
-      padding: 19px 14px 19px 22px;
+
+    .personal-box {
+      width: 100%;
+      height: 47px;
+      background: #387DF7;
+      border-radius: 4px;
+      line-height: 47px;
+      padding-left: 20px ;
+      padding-right: 40px;
+      box-sizing: border-box;
       display: flex;
+      margin-top: 20px;
       justify-content: space-between;
       position: relative;
-      .personal-box-img{
+      .personal-box-img {
         position: absolute;
         width: 24px;
         height: 24px;
-        left:10px;
-        top:-8px;
+        left: 10px;
+        top: -8px;
 
       }
     }
-    .personal-ul{
 
+    .personal-ul {
       display: flex;
-      justify-content: space-between;
-      .label{
-        color: #fff;
-        font-size: 12px;
+      li{
+        flex: 1;
+        text-align: center;
       }
-      p{
-        margin-top: 10px;
-        span{
+      .label {
+        color: #333;
+        font-size: 12px;
+        text-align: center;
+      }
+
+      p {
+        margin-top: 5px;
+        text-align: center;
+        color: #000;
+        span {
           font-size: 22px;
-          color: #ffffff;
+          text-align: center;
+          color: #333;
         }
       }
     }
   }
-  .list-active{
-  display: none;
-  width: 458px;
-  height: 165px;
-  padding: 20px;
-  background: #FFFFFF;
-  box-sizing: border-box;
-  box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.05);
-  border-radius: 2px;
-  border: 1px solid #EDEFF0;
-  position: absolute;
-  top: 30px;
-  left: -16%;
-  z-index: 999;
-  .list-content{
-    display: flex;
-    padding-bottom: 20px;
-    border-bottom: 1px solid #EDEFF0;
-    .list-img{
-      width: 125px;
-      height: 70px;
-      position: relative;
-      ::v-deep .el-image{
-        border-radius: 4px !important;
+
+  .list-active {
+    display: none;
+    width: 458px;
+    height: 165px;
+    padding: 20px;
+    background: #FFFFFF;
+    box-sizing: border-box;
+    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
+    border-radius: 2px;
+    border: 1px solid #EDEFF0;
+    position: absolute;
+    top: 30px;
+    left: -16%;
+    z-index: 999;
+
+    .list-content {
+      display: flex;
+      padding-bottom: 20px;
+      border-bottom: 1px solid #EDEFF0;
+
+      .list-img {
+        width: 125px;
+        height: 70px;
+        position: relative;
+
+        ::v-deep .el-image {
+          border-radius: 4px !important;
+        }
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+
+        .course-type {
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          height: 20;
+          line-height: 20px;
+          font-size: 12px;
+          color: #FFFFFF;
+          padding: 0px 8px;
+          background: #f99000;
+          border-radius: 0px 12px 0px 0px;
+        }
       }
-      img{
-        width: 100%;
-        height: 100%;
-      }
-      .course-type{
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        height: 20;
-        line-height: 20px;
-        font-size: 12px;
-        color: #FFFFFF;
-        padding: 0px 8px;
-        background: #f99000;
-        border-radius: 0px 12px 0px 0px;
+
+      .list-text {
+        flex: 1;
+        margin-left: 12px;
+
+        h6 {
+          font-size: 14px;
+          margin: 0px;
+          font-weight: 500;
+          line-height: normal;
+          color: #04243C;
+        }
+
+        span {
+          font-size: 14px;
+          color: #6E7B84;
+        }
       }
     }
-    .list-text{
-      flex: 1;
-      margin-left: 12px;
-      h6{
-        font-size: 14px;
-        margin: 0px;
-        font-weight: 500;
-        line-height: normal;
-        color: #04243C;
-      }
-      span{
-        font-size: 14px;
-        color: #6E7B84;
+
+    .list-bottom {
+      padding-top: 10px;
+
+      ::v-deep .interact-bar-btns {
+        justify-content: space-between !important;
+
+        .interact-bar-btn {
+          margin: 0 !important;
+        }
       }
     }
   }
-  .list-bottom{
-    padding-top: 10px;
-    ::v-deep .interact-bar-btns{
-      justify-content: space-between !important;
-      .interact-bar-btn{
-        margin: 0 !important;
-      }
+
+  .list-info {
+    position: relative;
+
+    .span {
+      display: flex;
     }
   }
-}
-  .list-info{
-  position: relative;
-  .span{
-    display: flex;
+
+  .list-info:hover .list-active {
+    // transition: all 0.5s;
+    display: block;
   }
-}
-.list-info:hover .list-active{
-  // transition: all 0.5s;
-  display: block;
-}
-// .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
-//   width: 108px;
-//   height: 38px;
-// }
 
-.bannbox{
-  width: 100%;
-  height: 520px;
-  text-align: center;
-   filter:blur(5px);
-    z-index:-1;
-    background-size:100% 100%;
+  // .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
+  //   width: 108px;
+  //   height: 38px;
+  // }
 
-}
+  .bannbox {
+    width: 100%;
+    height: 520px;
+    text-align: center;
+    filter: blur(5px);
+    z-index: -1;
+    background-size: 100% 100%;
 
-::v-deep.swiper-slide .games .swiper-slide-active{
-  text-align: center !important;
-}
-#container{
-  position: absolute;
-  height: 520px;
-  top: 0;
-  width: 100%;
-}
-.banner-img{
-  height: 520px;
-  position:absolute;
-  top: 0;
-  left:0;
-  right:0;
-  transform:(-50%,-50%);
-}
-.course-banner{
+  }
+
+  ::v-deep.swiper-slide .games .swiper-slide-active {
+    text-align: center !important;
+  }
+
+  #container {
+    position: absolute;
+    height: 520px;
+    top: 0;
+    width: 100%;
+  }
+
+  .banner-img {
+    height: 520px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    transform: (-50%, -50%);
+  }
+
+  .course-banner {
     height: 520px;
     // background: url('/images/course-banner.png');
   }
-.case-orginfo{
-  // line-height: 25px;
-  height: 45px;
-}
-.three-line-ellipsis {
+
+  .case-orginfo {
+    // line-height: 25px;
+    height: 45px;
+  }
+
+  .three-line-ellipsis {
     overflow: hidden;
     text-overflow: ellipsis;
-     box-sizing: border-box;
-  -webkit-line-clamp: 3;
-    word-break: break-all;
-     display: -webkit-box;
-  -webkit-box-orient: vertical;
-}
-.case-box{
-  display: flex;
-
-  .case-index{
-    position: relative;
-    // width: 408px;
-    // height: 396px;
-    background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
-    border-radius: 8px;
     box-sizing: border-box;
-    // margin-right: 36px;
-    &:nth-child(2){
-      .case-top{
-        background: linear-gradient(333deg, #D2DEF3 0%, #B4C4E0 100%);
-      }
-    }
-    &:last-child{
-      .case-top{
-        background: linear-gradient(153deg, #A4D3DF 0%, #B4DCE6 100%);
-      }
-      margin-right: 0;
+    -webkit-line-clamp: 3;
+    word-break: break-all;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+  }
 
-    }
-   .case-inter{
-      position: absolute;
-      // left: 30px;
-      // bottom: 30px;
-      display: flex;
-      // ::v-deep .el-avatar--small{
-      //    width: 32px;
-      //    height: 32px;
-      // }
-    }
-    .case-top{
-      // height: 120px;
-      background: linear-gradient(153deg, #82A8D1 0%, #A4C5E8 100%);
-      border-radius: 8px 8px 0px 0px;
-    }
-    .case-conent{
-      position: absolute;
-      // top:40px;
-      // left:30px;
-      // width: 350px;
-      // height: 274px;
-      background: #FFFFFF;
-      box-shadow: 0px 1px 10px 0px rgba(4,36,60,0.05);
-      border-radius: 4px;
-      // padding: 30px;
-      .cast-time{
-        font-size: 14px;
-        color: #6E7B84;
-        // display: flex;
-        // justify-content: space-between;
-        // margin-bottom: 20px;
-          .time-one{
+  // .case-box {
+  //   display: flex;
+
+  .case-index {
+      position: relative;
+      // width: 408px;
+      // height: 396px;
+      background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
+      border-radius: 8px;
+      box-sizing: border-box;
+
+      // margin-right: 36px;
+      &:nth-child(2) {
+        .case-top {
+          background: linear-gradient(333deg, #D2DEF3 0%, #B4C4E0 100%);
+        }
+      }
+
+      &:last-child {
+        .case-top {
+          background: linear-gradient(153deg, #A4D3DF 0%, #B4DCE6 100%);
+        }
+
+        margin-right: 0;
+
+      }
+
+      .case-inter {
+        position: absolute;
+        // left: 30px;
+        // bottom: 30px;
+        display: flex;
+        // ::v-deep .el-avatar--small{
+        //    width: 32px;
+        //    height: 32px;
+        // }
+      }
+
+      .case-top {
+        // height: 120px;
+        background: linear-gradient(153deg, #82A8D1 0%, #A4C5E8 100%);
+        border-radius: 8px 8px 0px 0px;
+      }
+
+      .case-conent {
+        position: absolute;
+        // top:40px;
+        // left:30px;
+        // width: 350px;
+        // height: 274px;
+        background: #FFFFFF;
+        box-shadow: 0px 1px 10px 0px rgba(4, 36, 60, 0.05);
+        border-radius: 4px;
+
+        // padding: 30px;
+        .cast-time {
+          font-size: 14px;
+          color: #6E7B84;
+
+          // display: flex;
+          // justify-content: space-between;
+          // margin-bottom: 20px;
+          .time-one {
             height: 24px;
             background: rgba($color: #387DF7, $alpha: 0.1);
             border-radius: 4px;
             // padding: 3px 10px;
             color: #387DF7;
             font-size: 12px;
-        }
-      }
-      .case-title{
-        // height: 48px;
-        // font-size: 16px;
-        font-weight: 600;
-        color: #00253E;
-        // line-height: 24px;
-      }
-      .case-text{
-        // height: 60px;
-        // font-size: 14px;
-        color: #6E7B84;
-        // line-height: 20px;
-        // margin-bottom: 30px;
-      }
-      ::v-deep .case-info{
-        .interact-bar-btns{
-          justify-content: space-between !important;
-          .interact-bar-btn{
-            margin: 0;
           }
         }
-      }
-    }
-  }
-}
-.casetwo{
-  border: 1px solid #F0F0F0;
-  width: 100%;
-  height: 245px;
-  margin-bottom:15px;
- position: relative;
-  background-color: #fff;
-  .case-top{
-    height: 70px;
-     background-image: linear-gradient(to right , #b8c7e2, #d0dcf3);
-  }
-}
-// .qa-dai{
-//   color: #5da1ff;
-// }
-.Uxtext{
-  font-weight: 450;
-  margin-top:5px;
-  margin-left:15px;
-  font-size:14px;
-  color:#3d3d3d;
-  cursor: pointer;
-  position: relative;
-}
-.uxicon{
-  font-size: 10px;
-  position: absolute;
-  top: -14px;
-  left: 98%;
-}
-.text-status1 {
-  // padding:3px;
-  color: #1ea0fa;
-}
-.text-status2 {
-  // padding: 3px;
-  color: #00aa00;
-}
-.text-status3 {
-  // padding: 3px;
-  color: #588afc;
-  margin-left: -10px;
-}
-.qa-yi {
-  color: blue;
-}
-.el-card {
-  border: 1px solid #f0f0f0;
-}
-.portal-content {
-  font-family: 'Noto Sans SC';
-}
-// .one-line-ellipsis {
-//     width: 100%;
-//     white-space: nowrap;
-//     word-break: break-all;
-//     text-overflow: ellipsis;
-//     display: -webkit-box;
-//     -webkit-box-orient: vertical;
-//     -webkit-line-clamp: 1; /* 这里是超出几行省略 */
 
-// }
-.two-line-ellipsis {
-  display: -webkit-box;
-  // white-space:pre-wrap;
-  overflow: hidden;
-  // text-overflow:ellipsis;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  box-sizing: border-box;
-}
-
-.course-card {
-  // padding: 30px;
-  padding-bottom: 22px;
-  // width: 410px;
-  // margin-bottom: 30px;
-  // margin-right: 36px;
-  box-sizing: border-box;
-  position: relative;
-  background-color: #ffffff;
-
-  // ::v-deep .cor-praises {
-  //   position: absolute;
-  //   right: 52px;
-  //   bottom: 24px;
-  //   // -moz-user-select: none; /*火狐*/
-  //   // -webkit-user-select: none; /*webkit浏览器*/
-  //   // -ms-user-select: none; /*IE10*/
-  //   // -khtml-user-select: none; /*早期浏览器*/
-  //   // user-select: none;
-  //   .interact-bar-btn{
-  //     .interact-bar-value{
-  //       display: none;
-  //     }
-  //   }
-  // }
-  // .cor-icon {
-  //   position: absolute;
-  //   left: 100px;
-  //   top: 54px;
-  //   border-radius: 50%;
-  //   background: rgba(88, 138, 252, 0.37);
-
-  //   .el-icon-caret-right {
-  //     font-size: 36px;
-  //     color: #588afc;
-  //   }
-  // }
-  .course-image-box {
-    position: relative;
-    // width: 350px;
-    // height: 200px;
-    // width: 100%;
-    .course-type {
-      position: absolute;
-      top: 0px;
-      right: 0px;
-      width: 60px;
-      height: 24px;
-      line-height: 24px;
-      text-align: center;
-      background-color: #f99000;
-      border-radius:  2px  4px  2px  14px;
-      font-size: 12px;
-      color: #ffffff;
-      -moz-user-select: none; /*火狐*/
-      -webkit-user-select: none; /*webkit浏览器*/
-      -ms-user-select: none; /*IE10*/
-      -khtml-user-select: none; /*早期浏览器*/
-      user-select: none;
-    }
-    .course-type-title {
-      position: absolute;
-      top: 5px;
-      right: 0px;
-      width: 90px;
-      height: 30px;
-      line-height: 30px;
-      text-align: center;
-      color: #ffffff;
-      -moz-user-select: none; /*火狐*/
-      -webkit-user-select: none; /*webkit浏览器*/
-      -ms-user-select: none; /*IE10*/
-      -khtml-user-select: none; /*早期浏览器*/
-      user-select: none;
-    }
-    .course-flag {
-      height: 26px;
-      position: absolute;
-      top: 15px;
-      right: 0;
-    }
-    .course-tip {
-      width: 100%;
-      height: 26px;
-      position: absolute;
-      bottom: 0;
-      padding: 0 10px;
-      color: #fff;
-      font-size: 14px;
-      .course-study-count {
-        float: left;
-      }
-      .course-time {
-        float: right;
-      }
-    }
-  }
-  .course-title {
-    margin: 16px 0 16px 0;
-    height: 44px;
-    -moz-user-select: none; /*火狐*/
-    -webkit-user-select: none; /*webkit浏览器*/
-    -ms-user-select: none; /*IE10*/
-    -khtml-user-select: none; /*早期浏览器*/
-    user-select: none;
-  }
-  .course-author {
-    // margin: 5px 15px;
-    // padding-bottom: 10px;
-    display: flex;
-    justify-content: space-between;
-
-    .course-author-left {
-        font-size: 14px;
-        color: #6E7B84;
-        -moz-user-select: none; /*火狐*/
-        -webkit-user-select: none; /*webkit浏览器*/
-        -ms-user-select: none; /*IE10*/
-        -khtml-user-select: none; /*早期浏览器*/
-        user-select: none;
-    }
-  }
-
-  .study-num {
-    font-size: 14px;
-    color: #6E7B84;
-    margin-left: 12px;
-    -moz-user-select: none; /*火狐*/
-    -webkit-user-select: none; /*webkit浏览器*/
-    -ms-user-select: none; /*IE10*/
-    -khtml-user-select: none; /*早期浏览器*/
-    user-select: none;
-  }
-  .course-score {
-    padding: 10px 15px;
-    height: 40px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    // border-top: 1px solid #ccc;
-    .course-score-star {
-      flex: 1;
-    }
-  }
-}
-.course-score-no {
-  text-align: right;
-  font-size: 14px;
-  color: #6B7C85;
-  line-height: 30px;
-  -moz-user-select: none; /*火狐*/
-  -webkit-user-select: none; /*webkit浏览器*/
-  -ms-user-select: none; /*IE10*/
-  -khtml-user-select: none; /*早期浏览器*/
-  user-select: none;
-}
-.course-score-value {
-  font-size: 14px;
-  //  margin-top: 5px;
-  margin-left: 32px;
-  line-height: 30px;
-  color: #FA6400;
-  font-family: 'Arial';
-  -moz-user-select: none; /*火狐*/
-  -webkit-user-select: none; /*webkit浏览器*/
-  -ms-user-select: none; /*IE10*/
-  -khtml-user-select: none; /*早期浏览器*/
-  user-select: none;
-  // font-size: 30px;
-}
-.cardmark {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(101, 101, 101, 0.8);
-  pointer-events: none;
-  border-radius: 5px;
-  padding: 10px;
-  opacity: 0;
-  -webkit-transition: all 1.5s;
-  -moz-transition: all 1.5s;
-  -ms-transition: all 1.5s;
-  -o-transition: all 1.5s;
-  transition: all 1.5s;
-  .cardmark-name {
-    font-size: 18px;
-    line-height: 30px;
-    font-weight: 600;
-    color: #fff;
-  }
-  .cardmark-info {
-    color: #fff;
-    font-size: 14px;
-    line-height: 20px;
-  }
-}
-.course-card:hover .cardmark {
-  opacity: 1;
-}
-.modules {
-  margin-top: 20px;
-  // width: 100%;
-  display: flex;
-  .modules-title {
-    .modules-text {
-      height: 28px;
-      font-size: 20px;
-      font-family: PingFangSC-Semibold-, PingFangSC-Semibold;
-      font-weight: 700;
-      color: #333333;
-    }
-    .recommend {
-      vertical-align: text-bottom;
-      height: 26px;
-    }
-    .quyer-tag {
-      margin-left: 15px;
-      a {
-        color: #333333;
-        font-size: 14px;
-        margin: 0 15px;
-        display: inline-block;
-        text-decoration: none;
-        outline: none;
-      }
-      .current {
-        width: 44px;
-        height: 26px;
-        background: #387DF7;
-        border-radius: 4px;
-        color: #fff;
-        line-height: 26px;
-        text-align: center;
-      }
-      // .current::after {
-      //   content: '';
-      //   width: 18px;
-      //   height: 2px;
-      //   background-color: #5da1ff;
-      //   margin: 0 auto;
-      //   display: block;
-      // }
-    }
-    .more {
-      float: right;
-      margin-top: 7px;
-      margin-right: 40px;
-      color: #333333;
-      font-size: 14px;
-    }
-  }
-
-  .modules-list {
-    margin-top: 30px;
-    // margin-bottom: 15px;
-    // margin-right: 36px;
-    .case-card {
-      // width: 593px;
-      margin-bottom: 15px;
-      .case-info-image-box {
-        position: relative;
-        .case-info {
-          width: 385px;
-          .case-info-title {
-            font-size: 18px;
-            color: #343434;
-            margin-bottom: 5px;
-            .case-info-time {
-              font-size: 12px;
-              color: #999999;
-              float: right;
-              margin-top: 8px;
-            }
-          }
-          .case-info-summary {
-            font-size: 12px;
-            color: #666666;
-            height: 82px;
-            line-height: 18px;
-          }
+        .case-title {
+          // height: 48px;
+          // font-size: 16px;
+          font-weight: 600;
+          color: #00253E;
+          // line-height: 24px;
         }
-        img {
-          width: 160px;
-          height: 105px;
-          position: absolute;
-          top: 5px;
-          right: 0;
-        }
-      }
-      .case-info-box {
-        .case-info {
-          .case-info-title {
-            font-size: 18px;
-            color: #343434;
-            margin-bottom: 5px;
-            .case-info-time {
-              font-size: 12px;
-              color: #999999;
-              float: right;
-              margin-top: 8px;
-            }
-          }
-          .case-info-summary {
-            font-size: 12px;
-            color: #666666;
-            height: 82px;
-            line-height: 18px;
-          }
-        }
-      }
-      .case-other-info {
-        height: 40px;
-        margin-top: 10px;
-        display: flex;
-        justify-content: space-between;
-      }
-    }
 
-    .article-card {
-      width: 100%;
-      background: #fff;
-      // padding: 30px;
-      border-radius: 8px;
-
-      .article-card-left {
-        // float: left;
-        .article-card-box {
-
-          .article-info-image-box {
-            .article-info {
-              height: 400px;
-              .article-info-title {
-                font-size: 16px;
-                color: #00253E;
-                font-weight: 500;
-                margin-bottom: 5px;
-                margin-top: 5px;
-              }
-              .article-info-summary {
-                font-size: 14px;
-                color: #6E7B84;
-                height: 160px;
-                line-height: 22px;
-              }
-            }
-            img {
-              width: 470px;
-              height: 330px;
-              //  width: 100%;
-              // height: 100%;
-            }
-          }
-        }
-      }
-
-      .article-card-right {
-        // float: right;
-        // width: 68%;
-        flex: 1;
-        margin-left: 28px;
-        .article-card-box {
-          // height: 160px;
-          margin-bottom: 16px;
-          padding-bottom: 16px;
-          &:last-child{
-            margin-bottom: 0px;
-          padding-bottom: 0px;
-          }
-          .article-info-box {
-            .article-info {
-              display: flex;
-              .article-image {
-                // width: 150px;
-                // height: 150px;
-                // margin-right: 10px;
-                width: 140px;
-                height: 105px;
-                margin-top: 10px;
-                margin-left: 20px;
-              }
-              .article-body {
-                flex: 1;
-                .article-info-title {
-                  font-size: 18px;
-                  color: #343434;
-                  margin-bottom: 5px;
-                  .article-info-time {
-                    font-size: 12px;
-                    color: #999999;
-                    float: right;
-                    margin-top: 8px;
-                    font-weight: 500;
-                  }
-                }
-                .article-info-summary {
-                  padding-top: 9px;
-                  font-size: 14px;
-                  color: #666666;
-                  height: 43px;
-                  line-height: 18px;
-                  font-weight: 500;
-                  margin-bottom: 20px;
-                }
-              }
-            }
-          }
-        }
-        .article-card-box:not(:last-child) {
-          border-bottom: 1px solid #ededed;
-        }
-      }
-
-      .article-other-info {
-        // height: 40px;
-        // margin-top: 10px;
-        display: flex;
-        // justify-content: space-between;
-      }
-    }
-    .qa-box{
-      display: flex;
-      .qa-card{
-      // width: 298px;
-      // height: 320px;
-      // padding: 30px;
-      box-sizing: border-box;
-      box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.05);
-      border-radius: 8px;
-      // margin-right: 36px;
-      background: #fff;
-      &:last-child{
-        margin-right: 0;
-      }
-      .qa-top{
-        & span:first-child{
-          height: 24px;
-          background: rgba($color: #387DF7, $alpha: 0.05);
-          // padding: 3px 10px;
-          border-radius: 4px;
-          font-size: 12px;
-          color: #387DF7;
-          // margin-right: 46px;
-        }
-        span{
+        .case-text {
+          // height: 60px;
           // font-size: 14px;
           color: #6E7B84;
+          // line-height: 20px;
+          // margin-bottom: 30px;
         }
-      }
-      .qa-center{
-        position: relative;
-        // margin-top: 20px;
-        // width: 238px;
-        // height: 152px;
-        background: rgba($color: #04243C, $alpha: 0.04);
-        border-radius: 4px;
-        // padding: 20px;
-        .qa-views{
-          position: absolute;
-          color: #6E7B84;
-          font-size: 14px;
-          // left: 20px;
-          // bottom: 20px;
 
+        ::v-deep .case-info {
+          .interact-bar-btns {
+            justify-content: space-between !important;
+
+            .interact-bar-btn {
+              margin: 0;
+            }
+          }
         }
       }
-      .qa-char{
-        display: flex;
-      }
     }
+  //}
+
+  .casetwo {
+    border: 1px solid #F0F0F0;
+    width: 100%;
+    height: 245px;
+    margin-bottom: 15px;
+    position: relative;
+    background-color: #fff;
+
+    .case-top {
+      height: 70px;
+      background-image: linear-gradient(to right, #b8c7e2, #d0dcf3);
+    }
+  }
+
+  // .qa-dai{
+  //   color: #5da1ff;
+  // }
+  .Uxtext {
+    font-weight: 450;
+    margin-top: 5px;
+    margin-left: 15px;
+    font-size: 14px;
+    color: #3d3d3d;
+    cursor: pointer;
+    position: relative;
+  }
+
+  .uxicon {
+    font-size: 10px;
+    position: absolute;
+    top: -14px;
+    left: 98%;
+  }
+
+  .text-status1 {
+    // padding:3px;
+    color: #1ea0fa;
+  }
+
+  .text-status2 {
+    // padding: 3px;
+    color: #00aa00;
+  }
+
+  .text-status3 {
+    // padding: 3px;
+    color: #588afc;
+    margin-left: -10px;
+  }
+
+  .qa-yi {
+    color: blue;
+  }
+
+  .el-card {
+    border: 1px solid #f0f0f0;
+  }
+
+  .portal-content {
+    font-family: 'Noto Sans SC';
+  }
+
+  // .one-line-ellipsis {
+  //     width: 100%;
+  //     white-space: nowrap;
+  //     word-break: break-all;
+  //     text-overflow: ellipsis;
+  //     display: -webkit-box;
+  //     -webkit-box-orient: vertical;
+  //     -webkit-line-clamp: 1; /* 这里是超出几行省略 */
+
+  // }
+  .two-line-ellipsis {
+    display: -webkit-box;
+    // white-space:pre-wrap;
+    overflow: hidden;
+    // text-overflow:ellipsis;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    box-sizing: border-box;
+  }
+
+  .course-card {
+    // padding: 30px;
+    padding-bottom: 22px;
+    // width: 410px;
+    // margin-bottom: 30px;
+    // margin-right: 36px;
+    box-sizing: border-box;
+    position: relative;
+    background-color: #ffffff;
+
+    // ::v-deep .cor-praises {
+    //   position: absolute;
+    //   right: 52px;
+    //   bottom: 24px;
+    //   // -moz-user-select: none; /*火狐*/
+    //   // -webkit-user-select: none; /*webkit浏览器*/
+    //   // -ms-user-select: none; /*IE10*/
+    //   // -khtml-user-select: none; /*早期浏览器*/
+    //   // user-select: none;
+    //   .interact-bar-btn{
+    //     .interact-bar-value{
+    //       display: none;
+    //     }
+    //   }
+    // }
+    // .cor-icon {
+    //   position: absolute;
+    //   left: 100px;
+    //   top: 54px;
+    //   border-radius: 50%;
+    //   background: rgba(88, 138, 252, 0.37);
+
+    //   .el-icon-caret-right {
+    //     font-size: 36px;
+    //     color: #588afc;
+    //   }
+    // }
+    .course-image-box {
+      position: relative;
+
+      // width: 350px;
+      // height: 200px;
+      // width: 100%;
+      .course-type {
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        width: 60px;
+        height: 24px;
+        line-height: 24px;
+        text-align: center;
+        background-color: #f99000;
+        border-radius: 2px 4px 2px 14px;
+        font-size: 12px;
+        color: #ffffff;
+        -moz-user-select: none;
+        /*火狐*/
+        -webkit-user-select: none;
+        /*webkit浏览器*/
+        -ms-user-select: none;
+        /*IE10*/
+        -khtml-user-select: none;
+        /*早期浏览器*/
+        user-select: none;
+      }
+
+      .course-type-title {
+        position: absolute;
+        top: 5px;
+        right: 0px;
+        width: 90px;
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
+        color: #ffffff;
+        -moz-user-select: none;
+        /*火狐*/
+        -webkit-user-select: none;
+        /*webkit浏览器*/
+        -ms-user-select: none;
+        /*IE10*/
+        -khtml-user-select: none;
+        /*早期浏览器*/
+        user-select: none;
+      }
+
+      .course-flag {
+        height: 26px;
+        position: absolute;
+        top: 15px;
+        right: 0;
+      }
+
+      .course-tip {
+        width: 100%;
+        height: 26px;
+        position: absolute;
+        bottom: 0;
+        padding: 0 10px;
+        color: #fff;
+        font-size: 14px;
+
+        .course-study-count {
+          float: left;
+        }
+
+        .course-time {
+          float: right;
+        }
+      }
+    }
+
+    .course-title {
+      margin: 16px 0 16px 0;
+      height: 44px;
+      -moz-user-select: none;
+      /*火狐*/
+      -webkit-user-select: none;
+      /*webkit浏览器*/
+      -ms-user-select: none;
+      /*IE10*/
+      -khtml-user-select: none;
+      /*早期浏览器*/
+      user-select: none;
+    }
+
+    .course-author {
+      // margin: 5px 15px;
+      // padding-bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .course-author-left {
+        font-size: 14px;
+        color: #6E7B84;
+        -moz-user-select: none;
+        /*火狐*/
+        -webkit-user-select: none;
+        /*webkit浏览器*/
+        -ms-user-select: none;
+        /*IE10*/
+        -khtml-user-select: none;
+        /*早期浏览器*/
+        user-select: none;
+      }
+    }
+
+    .study-num {
+      font-size: 14px;
+      color: #6E7B84;
+      margin-left: 12px;
+      -moz-user-select: none;
+      /*火狐*/
+      -webkit-user-select: none;
+      /*webkit浏览器*/
+      -ms-user-select: none;
+      /*IE10*/
+      -khtml-user-select: none;
+      /*早期浏览器*/
+      user-select: none;
+    }
+
+    .course-score {
+      padding: 10px 15px;
+      height: 40px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      // border-top: 1px solid #ccc;
+      .course-score-star {
+        flex: 1;
+      }
+    }
+  }
+
+  .course-score-no {
+    text-align: right;
+    font-size: 14px;
+    color: #6B7C85;
+    line-height: 30px;
+    -moz-user-select: none;
+    /*火狐*/
+    -webkit-user-select: none;
+    /*webkit浏览器*/
+    -ms-user-select: none;
+    /*IE10*/
+    -khtml-user-select: none;
+    /*早期浏览器*/
+    user-select: none;
+  }
+
+  .course-score-value {
+    font-size: 14px;
+    //  margin-top: 5px;
+    margin-left: 32px;
+    line-height: 30px;
+    color: #FA6400;
+    font-family: 'Arial';
+    -moz-user-select: none;
+    /*火狐*/
+    -webkit-user-select: none;
+    /*webkit浏览器*/
+    -ms-user-select: none;
+    /*IE10*/
+    -khtml-user-select: none;
+    /*早期浏览器*/
+    user-select: none;
+    // font-size: 30px;
+  }
+
+  .modules {
+    margin-top: 20px;
+    // width: 100%;
+    display: flex;
+
+    .modules-title {
+      .modules-text {
+        height: 28px;
+        font-size: 20px;
+        font-family: PingFangSC-Semibold-, PingFangSC-Semibold;
+        font-weight: 700;
+        color: #333333;
+      }
+
+      .recommend {
+        vertical-align: text-bottom;
+        height: 26px;
+      }
+
+      .quyer-tag {
+        margin-left: 15px;
+
+        a {
+          color: #333333;
+          font-size: 14px;
+          margin: 0 15px;
+          display: inline-block;
+          text-decoration: none;
+          outline: none;
+        }
+
+        .current {
+          width: 44px;
+          height: 26px;
+          background: #387DF7;
+          border-radius: 4px;
+          color: #fff;
+          line-height: 26px;
+          text-align: center;
+        }
+
+        // .current::after {
+        //   content: '';
+        //   width: 18px;
+        //   height: 2px;
+        //   background-color: #5da1ff;
+        //   margin: 0 auto;
+        //   display: block;
+        // }
+      }
+
+      .more {
+        float: right;
+        margin-top: 7px;
+        margin-right: 40px;
+        color: #333333;
+        font-size: 14px;
+      }
+    }
+
+    .modules-list {
+      margin-top: 30px;
+
+      // margin-bottom: 15px;
+      // margin-right: 36px;
+      .case-card {
+        // width: 593px;
+        margin-bottom: 15px;
+
+        .case-info-image-box {
+          position: relative;
+
+          .case-info {
+            width: 385px;
+
+            .case-info-title {
+              font-size: 18px;
+              color: #343434;
+              margin-bottom: 5px;
+
+              .case-info-time {
+                font-size: 12px;
+                color: #999999;
+                float: right;
+                margin-top: 8px;
+              }
+            }
+
+            .case-info-summary {
+              font-size: 12px;
+              color: #666666;
+              height: 82px;
+              line-height: 18px;
+            }
+          }
+
+          img {
+            width: 160px;
+            height: 105px;
+            position: absolute;
+            top: 5px;
+            right: 0;
+          }
+        }
+
+        .case-info-box {
+          .case-info {
+            .case-info-title {
+              font-size: 18px;
+              color: #343434;
+              margin-bottom: 5px;
+
+              .case-info-time {
+                font-size: 12px;
+                color: #999999;
+                float: right;
+                margin-top: 8px;
+              }
+            }
+
+            .case-info-summary {
+              font-size: 12px;
+              color: #666666;
+              height: 82px;
+              line-height: 18px;
+            }
+          }
+        }
+
+        .case-other-info {
+          height: 40px;
+          margin-top: 10px;
+          display: flex;
+          justify-content: space-between;
+        }
+      }
+
+      .article-card {
+        width: 100%;
+        background: #fff;
+        // padding: 30px;
+        border-radius: 8px;
+
+        .article-card-left {
+
+          // float: left;
+          .article-card-box {
+
+            .article-info-image-box {
+              .article-info {
+                height: 400px;
+
+                .article-info-title {
+                  font-size: 16px;
+                  color: #00253E;
+                  font-weight: 500;
+                  margin-bottom: 5px;
+                  margin-top: 5px;
+                }
+
+                .article-info-summary {
+                  font-size: 14px;
+                  color: #6E7B84;
+                  height: 160px;
+                  line-height: 22px;
+                }
+              }
+
+              img {
+                width: 470px;
+                height: 330px;
+                //  width: 100%;
+                // height: 100%;
+              }
+            }
+          }
+        }
+
+        .article-card-right {
+          // float: right;
+          // width: 68%;
+          flex: 1;
+          margin-left: 28px;
+
+          .article-card-box {
+            // height: 160px;
+            margin-bottom: 16px;
+            padding-bottom: 16px;
+
+            &:last-child {
+              margin-bottom: 0px;
+              padding-bottom: 0px;
+            }
+
+            .article-info-box {
+              .article-info {
+                display: flex;
+
+                .article-image {
+                  // width: 150px;
+                  // height: 150px;
+                  // margin-right: 10px;
+                  width: 140px;
+                  height: 105px;
+                  margin-top: 10px;
+                  margin-left: 20px;
+                }
+
+                .article-body {
+                  flex: 1;
+
+                  .article-info-title {
+                    font-size: 18px;
+                    color: #343434;
+                    margin-bottom: 5px;
+
+                    .article-info-time {
+                      font-size: 12px;
+                      color: #999999;
+                      float: right;
+                      margin-top: 8px;
+                      font-weight: 500;
+                    }
+                  }
+
+                  .article-info-summary {
+                    padding-top: 9px;
+                    font-size: 14px;
+                    color: #666666;
+                    height: 43px;
+                    line-height: 18px;
+                    font-weight: 500;
+                    margin-bottom: 20px;
+                  }
+                }
+              }
+            }
+          }
+
+          .article-card-box:not(:last-child) {
+            border-bottom: 1px solid #ededed;
+          }
+        }
+
+        .article-other-info {
+          // height: 40px;
+          // margin-top: 10px;
+          display: flex;
+          // justify-content: space-between;
+        }
+      }
+
+
+
+        .qa-card {
+          // width: 298px;
+          // height: 320px;
+          // padding: 30px;
+          box-sizing: border-box;
+          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
+          border-radius: 8px;
+          // margin-right: 36px;
+          background: #fff;
+
+          &:last-child {
+            margin-right: 0;
+          }
+
+          .qa-top {
+            & span:first-child {
+              height: 24px;
+              background: rgba($color: #387DF7, $alpha: 0.05);
+              // padding: 3px 10px;
+              border-radius: 4px;
+              font-size: 12px;
+              color: #387DF7;
+              // margin-right: 46px;
+            }
+
+            span {
+              // font-size: 14px;
+              color: #6E7B84;
+            }
+          }
+
+          .qa-center {
+            position: relative;
+            // margin-top: 20px;
+            // width: 238px;
+            // height: 152px;
+            background: rgba($color: #04243C, $alpha: 0.04);
+            border-radius: 4px;
+
+            // padding: 20px;
+            .qa-views {
+              position: absolute;
+              color: #6E7B84;
+              font-size: 14px;
+              // left: 20px;
+              // bottom: 20px;
+
+            }
+          }
+
+          .qa-char {
+            display: flex;
+          }
+        }
+
     }
   }
-}
 </style>
diff --git a/src/views/portal/article/Detail.vue b/src/views/portal/article/Detail.vue
index 0eec6a81..f60bcee7 100644
--- a/src/views/portal/article/Detail.vue
+++ b/src/views/portal/article/Detail.vue
@@ -1,9 +1,9 @@
 <template>
   <div id="article-index">
     <div class="article-banner">
-    <portal-header current="article" :goSearch="3"></portal-header>
+    <portal-header current="article" textColor="#ffffff" :goSearch="3"></portal-header>
     </div>
-    <div>
+    <div style="padding-top:30px">
       <div class="xcontent2">
          <div class="xcontent2-main" style="margin-right: 30px;" >
           <div  v-if="noData" >
@@ -290,7 +290,7 @@ export default {
     background: url('/images/article-banner.png');
   }
 .course-resources{
-  width: 410px;
+ 
   margin-top: 26px;
   img{
     width: 100%;
diff --git a/src/views/portal/article/Index.vue b/src/views/portal/article/Index.vue
index c5f45dc4..d38a553b 100644
--- a/src/views/portal/article/Index.vue
+++ b/src/views/portal/article/Index.vue
@@ -1,10 +1,10 @@
 2<template>
   <div id="article-list-content" class="article-list-content">
     <div class="article-banner">
-      <portal-header current="article" @emitInput="emitInput"></portal-header>
+      <portal-header current="article" textColor="#ffffff" @emitInput="emitInput"></portal-header>
     </div>
     <!--内容区域-->
-    <div class="">
+    <div style="padding-top:30px" class="">
       <div class="xcontent2">
         <div class="xcontent2-main" style="margin-right: 30px;background-color: #fff;padding-top: 50px;">
           <div>
@@ -80,13 +80,13 @@
                  <ul class="ranking-data">
                       <li v-for="(item, index) in ankingList" :key="index" style="margin-top:30px;line-height: 22px;cursor: pointer;">
                         <span class="portal-right-text orange-one" v-if="index==0" style="margin-right:94px">
-                          <img src="/images/list-01.png" alt="">
+                          <img src="/images/listblue01.png" alt="">
                         </span>
                         <span class="portal-right-text orange-tow" v-if="index==1" style="margin-right:94px">
-                            <img src="/images/list02.png" alt="">
+                            <img src="/images/listblue02.png" alt="">
                         </span>
                         <span class="portal-right-text orange-three" v-if="index==2" style="margin-right:94px">
-                            <img src="/images/list03.png" alt="">
+                            <img src="/images/listblue03.png" alt="">
                         </span>
                         <span class="portal-right-text" v-if="index==3" style="margin-right:94px">
                              <img src="/images/list04.png" alt="">
diff --git a/src/views/portal/case/Detail.vue b/src/views/portal/case/Detail.vue
index 00a59878..2142483b 100644
--- a/src/views/portal/case/Detail.vue
+++ b/src/views/portal/case/Detail.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="case-list-content">
-    <div class="case-banner">
-      <portal-header current="case" :goSearch="2"></portal-header>
+    <div style="margin-bottom:30px" class="case-banner">
+      <portal-header current="case" textColor="#fff" :goSearch="2"></portal-header>
     </div>
     <div class="">
        <div class="xcontent2">
@@ -96,7 +96,7 @@
               <el-empty :image-size="200"></el-empty>
             </div>
           </div>
-          <div :class="zoomShow?'':'xcontent2-minor'">
+          <div class="xcontent2-minor" :style="{display:zoomShow? '':'none'}">
             <div>
             <div id="fixd-box">
             <div class="portal-ranking ranking-bg">
@@ -524,7 +524,6 @@ export default {
     background: url('/images/case-banner.png');
   }
 .course-resources{
-  width: 410px;
   margin-top: 26px;
   img{
     width: 100%;
diff --git a/src/views/portal/case/Index.vue b/src/views/portal/case/Index.vue
index 15f49413..dd29c6d0 100644
--- a/src/views/portal/case/Index.vue
+++ b/src/views/portal/case/Index.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="case-list-content">
     <div class="case-banner">
-      <portal-header current="case" @emitInput="emitInput"></portal-header>
+      <portal-header current="case" textColor="#fff" @emitInput="emitInput"></portal-header>
     </div>
     <div class="xcontent2">
       <div class="xcontent2-main" style="margin-right: 30px;">
@@ -100,7 +100,7 @@
                       </div>
                       <div style="display: flex;justify-content: flex-end;">
                        <div style="margin:8px 0;">
-                          <interactBar :type="0" :shares="false"  :data="item" :readonly="true"></interactBar> </div>
+                          <interactBar :type="0" :shares="false"  :data="item" :readonly="true" :views="false"></interactBar> </div>
                       </div>
                     </div>
                   </div>
@@ -709,7 +709,6 @@ export default {
 
 <style scoped lang="scss">
 .course-resources{
-  width: 410px;
   margin-top: 26px;
   img{
     width: 100%;
diff --git a/src/views/portal/course/Detail.vue b/src/views/portal/course/Detail.vue
index 688418eb..cf1c4642 100644
--- a/src/views/portal/course/Detail.vue
+++ b/src/views/portal/course/Detail.vue
@@ -1,67 +1,70 @@
 <template>
   <div>
-    <portal-header current="course" :goSearch="1"></portal-header>
-    <div  class="portal-content xcontent">
-      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb-nav">
-        <el-breadcrumb-item :to="{ path: '/course' }">课程列表</el-breadcrumb-item>
-        <el-breadcrumb-item>课程详情</el-breadcrumb-item>
-      </el-breadcrumb>
-      <!-- <div class="course-title">
-        <div class="title">{{courseInfo.name}}</div>
-        <div class="course-title-right">
-          <interactBar :readonly="!stuStusts || stuStusts==0" :type="1" :data="courseInfo" :comments="false" :views="false"></interactBar>
+    <div class="xpage-coures-banner">
+        <portal-header current="course" textColor="#fff" :goSearch="1"></portal-header>
+        <div class="xcontent">
+            <div class="banner-crumbs">
+               <router-link to="/course"><span class="crumbs-first">课程列表</span></router-link>
+               <span class="crumbs-line">  &gt; </span>
+               <span class="crumbs-last">课程详情</span>
+            </div>
+            <div class="bcourse-title">
+               <!-- <span>{{courseInfo.name}}</span> -->
+                <!-- <span>{{courseInfo.summary}}</span>  -->
+                <!-- <span class="bcourse-score">{{toScore(courseInfo.score)}}分</span> -->
+            </div>
         </div>
-      </div> -->
-      <el-row :gutter="10">
-        <el-col :span="24">
-          <el-card :body-style="{ padding: '0px' }">
-            <div class="detail">
-              <div class="image">
-                <course-image :course="courseInfo"></course-image>
-              </div>
-              <div class="detail-info">
-              <div class="course-title">
-                <div class="title"> {{courseInfo.name}}</div>
-                <interactBar :readonly="!stuStusts || stuStusts==0" :type="1" :data="courseInfo" :praises="false" :comments="false" :views="false"></interactBar>
-              </div>
-                  <!-- <div class="course-title-right"> -->
-                  <!-- <interactBar :readonly="!stuStusts || stuStusts==0" :type="1" :data="courseInfo" :comments="false" :views="false"></interactBar> -->
-                <!-- </div> -->
-                <div>
-                  <div class="study-count">{{courseInfo.studys}}人学习</div>
-                  <!-- <div><span style="font-size:20px;color:#ff8e00">{{courseInfo.score ? courseInfo.score.toFixed(1) : 0}}</span><span style="font-size:12px;color:#ff8e00">分</span></div> -->
-                </div>
-                <div class="label-div">
-                  <el-tag class="label-item" effect="plain" v-for="(item,tagIdx) in tagArray" :key="tagIdx">{{item}}</el-tag>
-                 </div>
-                <!-- <div style="width:160px;height:50px"> -->
-                <!-- </div> -->
-                <!-- <div class="label-div">
-                  <el-tag class="label-item" effect="plain">{{courseType(courseInfo.type)}}</el-tag>
-                </div> -->
-                  <div class="score-div">
-                     <!-- colors="[#FF8E00]" -->
-                    <div v-if="courseInfo.score">
-                      <el-rate disabled v-model="courseInfo.score"></el-rate>
-                      <span class="score-text">{{courseInfo.score ? courseInfo.score.toFixed(1) : 0}}<span style="font-size: 14px;">分</span></span>
-                     </div>
-                     <div v-else class="score-no">未评分</div>
-                  </div>
-                  <div class="btn-div"  style="height:30px;margin-top: 15px;">
-                    <el-button v-if="stuStusts == 0" type="primary" @click="startSigningUp()" >立即报名</el-button>
-                    <el-button v-if="stuStusts == 1" type="primary" @click="jumpJearning">{{btnName}}</el-button>
-                 </div>
+    </div>
 
-                <div class="erweima" v-if="courseInfo.device == 2 || courseInfo.device == 3">
-                  <img class="detail-img" v-show="!showQrcode" @click="showQrcode = true" src="../../../assets/images/qr.png">
-                  <div v-show="showQrcode" class="qrcode" @click="showQrcode = false">
-                    <div id="qrcode" ref="qrcode"></div>
-                    <!-- <div class="qrcode-title">手机扫码观看</div> -->
-                  </div>
+    <div  class="portal-content xcontent">
+
+          <div class="detail">
+            <div class="image">
+              <course-image :course="courseInfo"></course-image>
+            </div>
+            <div class="detail-info">
+            <div class="course-title">
+              <div class="title"> {{courseInfo.name}}</div>
+              <interactBar :readonly="!stuStusts || stuStusts==0" :type="1" :data="courseInfo" :praises="false" :comments="false" :views="false"></interactBar>
+            </div>
+                <!-- <div class="course-title-right"> -->
+                <!-- <interactBar :readonly="!stuStusts || stuStusts==0" :type="1" :data="courseInfo" :comments="false" :views="false"></interactBar> -->
+              <!-- </div> -->
+              <div>
+                <div class="study-count">{{courseInfo.studys}}人学习</div>
+                <!-- <div><span style="font-size:20px;color:#ff8e00">{{courseInfo.score ? courseInfo.score.toFixed(1) : 0}}</span><span style="font-size:12px;color:#ff8e00">分</span></div> -->
+              </div>
+              <div class="label-div">
+                <el-tag class="label-item" effect="plain" v-for="(item,tagIdx) in tagArray" :key="tagIdx">{{item}}</el-tag>
+               </div>
+              <!-- <div style="width:160px;height:50px"> -->
+              <!-- </div> -->
+              <!-- <div class="label-div">
+                <el-tag class="label-item" effect="plain">{{courseType(courseInfo.type)}}</el-tag>
+              </div> -->
+                <div class="score-div">
+                   <!-- colors="[#FF8E00]" -->
+                  <div v-if="courseInfo.score">
+                    <el-rate disabled v-model="courseInfo.score"></el-rate>
+                    <span class="score-text">{{courseInfo.score ? courseInfo.score.toFixed(1) : 0}}<span style="font-size: 14px;">分</span></span>
+                   </div>
+                   <div v-else class="score-no">未评分</div>
+                </div>
+                <div class="btn-div"  style="height:30px;margin-top: 15px;">
+                  <el-button v-if="stuStusts == 0" type="primary" @click="startSigningUp()" >立即报名</el-button>
+                  <el-button v-if="stuStusts == 1" type="primary" @click="jumpJearning">{{btnName}}</el-button>
+               </div>
+
+              <div class="erweima" v-if="courseInfo.device == 2 || courseInfo.device == 3">
+                <img class="detail-img" v-show="!showQrcode" @click="showQrcode = true" src="../../../assets/images/qr.png">
+                <div v-show="showQrcode" class="qrcode" @click="showQrcode = false">
+                  <div id="qrcode" ref="qrcode"></div>
+                  <!-- <div class="qrcode-title">手机扫码观看</div> -->
                 </div>
               </div>
             </div>
-          </el-card>
+          </div>
+
           <el-row :gutter="10">
             <el-col :span="18">
               <el-card :body-style="{ padding: '0px' }" class="info" style="margin-top: 10px;">
@@ -121,8 +124,7 @@
               </el-card>
             </el-col>
           </el-row>
-        </el-col>
-      </el-row>
+
     </div>
     <portal-footer></portal-footer>
   </div>
@@ -220,10 +222,10 @@ export default {
               })
               this.catalogTree=treeList;
           }
-          
-         
-        
-        
+
+
+
+
         this.showQrimage();
         this.isSignUp();
       }else{
@@ -411,6 +413,8 @@ export default {
 
 .detail {
   display: flex;
+  margin-top: 20px;
+  background-color: #fff;
   .image {
       width: 500px;
       height: 280px;
diff --git a/src/views/portal/course/Index(1).vue b/src/views/portal/course/Index(1).vue
deleted file mode 100644
index d13d5e53..00000000
--- a/src/views/portal/course/Index(1).vue
+++ /dev/null
@@ -1,1401 +0,0 @@
-<template>
-  <div id="couser-list-content" class="couser-list-content">
-    <portal-header current="course" @emitInput="emitInput"></portal-header>
-    <!-- <div class="course-input">
-      <el-input  class="course-value" v-model.trim="course.keyword"  maxlength="20" @input="inputOn($event)" clearable placeholder="请输入关键词搜索"><el-button slot="append" icon="el-icon-search" @click="searchData()" class="course-btn"></el-button></el-input>
-    </div> -->
-    <div class="xcontent portal-content">
-      <div class="xrow" style="display: flex;justify-content: space-between;">
-        <div style="flex: 1;" class="xcol content-div">
-          <el-row class="search-div">
-            <div class="searchbar" v-if="searchTags.length > 0">
-              <div style="line-height: 30px;">
-                <span class="item-title"> 搜索条件</span>
-                <el-tag closable v-for="(tag, tagIdx) in searchTags" :key="tagIdx" @close="tagsClose(tag,tagIdx)">{{ tag.name }}</el-tag>
-              </div>
-            </div>
-            <el-row class="search-item">
-              <el-col :span="24">
-                <div style="margin-top:10px; display: flex;">
-                  <div style="line-height: 25px;padding-right: 10px;">
-                    <span class="item-title" style="padding-right: 5px;">授课方式</span>
-                    <span class="item-line"></span>
-                  </div>
-                  <!-- // 10微课，21在线课(直播)；20:在线课( 录播)；30:面授课；40:学习项目,90:混合式， -->
-                  <div>
-                  <el-radio-group v-model="category" size="mini" @change="searchData">
-                    <el-radio-button :label="null">全部</el-radio-button>
-                    <el-radio-button :label="20">录播课</el-radio-button>
-                    <el-radio-button :label="30">线下课</el-radio-button>
-                    <el-radio-button :label="40">学习项目</el-radio-button>
-                  </el-radio-group>
-                  </div>
-                </div>
-              </el-col>
-            </el-row>
-            <div :class="queryExpand ? 'search-div-expand' : 'search-div-collapse'">
-              <el-row class="search-item">
-                <el-col :span="24">
-                  <div style="margin-top:10px;display: flex;">
-                    <div style="line-height: 25px;padding-right: 10px;">
-                      <span class="item-title" style="padding-right: 5px;">内容分类</span>
-                      <span class="item-line"></span>
-                    </div>
-                    <el-radio-group  v-model="types.sysTypes" size="mini" @change="changeType">
-                      <el-radio-button :label="null">全部</el-radio-button>
-                      <el-radio-button v-for="item in optionsList" :key="item.id" :label="item.id">{{item.name}}</el-radio-button>
-                    </el-radio-group>
-                      <span @click="jumUX()" class="Uxtext" style=""> U选小课堂
-                          <span class="uxicon">
-                            <svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
-                          </span>
-                      </span>
-                  </div>
-                  <div class="search-item-sub" v-if="types.oneSubList.length != 0">
-                    <el-radio-group v-model="types.subOne" size="mini"  @change="changeTypeSub">
-                      <el-radio-button label="0">全部</el-radio-button>
-                      <el-radio-button v-for="item in types.oneSubList" :key="item.id" :label="item.id">{{item.name}}</el-radio-button>
-                    </el-radio-group>
-                  </div>
-                   <div class="search-item-sub" v-if="types.towSubList.length != 0">
-                    <el-radio-group v-model="types.subTow" size="mini" @change="searchData">
-                      <el-radio-button label="0">全部</el-radio-button>
-                      <el-radio-button v-for="item in types.towSubList" :key="item.id" :label="item.id">{{item.name}}</el-radio-button>
-                    </el-radio-group>
-                  </div>
-                </el-col>
-              </el-row>
-            </div>
-          </el-row>
-          <el-row class="order-div" v-if="listType == 1">
-            <span class="quyer-tag">
-                 <el-button type="text" class="order-class" @click="orderChange('studys')" :class="{ actice: course.orderField == 'studys' }">最热</el-button>
-              <el-button type="text" class="order-class" @click="orderChange('publishTime')" :class="{ actice: course.orderField == 'publishTime' }">最新</el-button>
-            </span>
-          </el-row>
-          <div class="xrow data-content" v-if="listType == 1">
-            <div class="xrow-course course-index" v-for="(cinfo,cidx) in courseList" :key="cinfo.id" v-if="(courseList.length<=course.pageSize) || (cidx<parseInt(courseList.length/columns)*columns)">
-              <el-card class="course-card" :body-style="{padding:'0px'}">
-                <a :href="toCourseDetail(cinfo)">
-                  <div class="course-image-box">
-                    <course-image height="146px" :course="cinfo"></course-image>
-                    <span v-if="cinfo.type==20" class="course-type-title course-type">录播课</span>
-                    <span v-if="cinfo.type==10" class="course-type-title course-type">录播课</span>
-                    <span v-if="cinfo.type=='online-course'" class="course-type-title course-type">录播课</span>
-                    <span v-if="cinfo.type=='face-course'" class="course-type-title course-type">线下课</span>
-                    <span v-if="cinfo.type=='project'" class="course-type-title course-type">学习项目</span>
-                </div>
-                  <!-- <el-tooltip class="item"  :content="cinfo.couretitle" placement="bottom-start" effect="light"  :visible-arrow="false" popper-class="text-tooltip" > -->
-                      <div :title="cinfo.name" class="course-title title-line-ellipsis"  v-html="$keywordActiveShow(cinfo.name,keyword)">
-                      </div>
-                  <!-- </el-tooltip> -->
-                <div class="course-author">
-                  <div class="course-author-left" v-if="cinfo.authorInfo">
-                      {{cinfo.authorInfo.name}}
-                  </div>
-                  <div style="flex:1;text-align: center;">
-                     <span class="study-num">{{cinfo.studys}}人学习</span>
-                  </div>
-                  <div style="padding-left:15px">
-                    <div v-if="cinfo.score">
-                  <span class="course-score-value">{{toScore(cinfo.score)}}</span>
-                </div>
-                <div v-else class="course-score-no">未评分</div>
-                  </div>
-                </div>
-                </a>
-                 <div class="cor-praises" v-if="cinfo.type == 10 || cinfo.type == 20"><interactBar :type="1" :data="cinfo" :comments="false" :praises="false" :shares="false" :views="false"></interactBar> </div>
-              </el-card>
-            </div>
-          </div>
-          <!--  分页 -->
-          <div class="pagination-div">
-            <span class="pag-text" @click="loadMore()" v-if="moreState == 1 && courseList.length>=course.pageSize">加载更多</span>
-            <span class="pag-text-msg" v-else-if="moreState == 2">数据加载中</span>
-            <span class="pag-text-msg" v-else-if="moreState == 3">没有更多数据了</span>
-          </div>
-        </div>
-        <div style="width: 245px;margin-left: 5px;">
-          <div>
-            <div id="fixd-box">
-            <div v-if="identity == 2 || identity == 3 || identity == 5">
-              <el-button style="width: 100%;margin-bottom:15px;height: 37px;border-radius: 0;" type="primary" @click="toNeedCourse">做课程</el-button>
-            </div>
-               <el-card class="ranking-card" >
-              <div slot="header">
-                <span style="font-size: 14px;font-weight: 600;color: #333333;">好评榜</span>
-              </div>
-              <div style="padding-bottom:10px">
-                <el-row class="ranking-title">
-                </el-row>
-                <el-row class="ranking-title  bacolor" v-for="(item, index) in scorelist" :key="index" >
-                  <el-col :span="6" style="height:34px">
-                    <img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
-                    <img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
-                    <img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
-                    <span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
-                  </el-col>
-                  <!-- <el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.name" placement="bottom" :visible-arrow="false" popper-class="text-tooltip"> -->
-                        <div :title="item.name" @click="jumpRouter(item)">
-                        <el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.name }}</el-col>
-                        </div>
-
-                  <!-- </el-tooltip> -->
-                </el-row>
-              </div>
-            </el-card>
-                <div style="height: 10px;"></div>
-            <el-card class="ranking-card">
-              <div slot="header">
-                <span style="font-size: 14px;font-weight: 600;color: #333333;">人气榜</span>
-              </div>
-              <div style="padding-bottom:10px">
-                <el-row class="ranking-title">
-                </el-row>
-                <el-row class="ranking-title bacolor" v-for="(item, index) in ankingList" :key="index">
-                  <el-col :span="6" style="height:34px">
-                    <img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
-                    <img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
-                    <img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
-                    <span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
-                  </el-col>
-                  <!-- <el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.name" placement="bottom" :visible-arrow="false" popper-class="text-tooltip"> -->
-                        <div :title="item.name" @click="jumpRouter(item)">
-                        <el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.name }}</el-col>
-                        </div>
-
-                  <!-- </el-tooltip> -->
-                </el-row>
-              </div>
-            </el-card>
-            <div style="height: 10px;"></div>
-            <el-card class="ranking-card">
-              <div slot="header">
-                <span style="font-size: 14px;font-weight: 600;color: #333333;">热度榜</span>
-              </div>
-              <div style="padding-bottom:10px">
-                <el-row class="ranking-title">
-                </el-row>
-                <el-row class="ranking-title bacolor" v-for="(item, index) in hotList" :key="index">
-                  <el-col :span="6" style="height:34px">
-                    <img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
-                    <img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
-                    <img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
-                    <span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
-                  </el-col>
-                  <!-- <el-tooltip :enterable="false" @click.native="jumpRouter2(item)" effect="light" :content="item.courseName" placement="bottom" :visible-arrow="false" popper-class="text-tooltip"> -->
-                        <div :title="item.courseName" @click="jumpRouter2(item)">
-                        <el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.courseName }}</el-col>
-                        </div>
-                  <!-- </el-tooltip> -->
-                </el-row>
-              </div>
-            </el-card>
-            </div>
-
-          </div>
-        </div>
-      </div>
-    </div>
-    <portal-footer></portal-footer>
-    <portalFloatTools ref="floatTools"></portalFloatTools>
-  </div>
-</template>
-<script>
-import { mapGetters, mapActions } from "vuex";
-import portalHeader from "@/components/PortalHeader.vue";
-import portalFooter from "@/components/PortalFooter.vue";
-import portalFloatTools from "@/components/PortalFloatTools.vue";
-import authorInfo from "@/components/Portal/authorInfo.vue";
-import courseItem from "@/components/Portal/course/courseItem.vue";
-import apiCoursePortal from "@/api/modules/coursePortal.js";
-import courseForm from "@/components/Course/courseForm.vue";
-import apiType from "@/api/modules/type.js";
-import apiCourse from "@/api/modules/coursePortal.js";
-import apiOldCourse from "@/api/boe/course.js";
-import apiTeacher from "@/api/modules/teacher.js";
-import apiUser from "@/api/system/user.js";
-import scene from "@/api/modules/scene.js";
-import interactBar from "@/components/Portal/interactBar.vue";
-import courseImage from "@/components/Course/courseImage.vue";
-import { courseType, getType, toScore } from "@/utils/tools.js";
-import { deepClone, param } from "../../../utils";
-import apiSearchterm from "@/api/modules/searchterm.js";
-import { Promise } from "q";
-export default {
-  name: "index",
-  components: {
-    portalHeader,
-    portalFooter,
-    portalFloatTools,
-    courseItem,
-    courseForm,
-    authorInfo,
-    courseImage,
-    interactBar
-  },
-  computed: {
-    ...mapGetters(["resOwnerMap", "sysTypeMap", "userInfo", "identity"])
-  },
-  data() {
-    return {
-      couretitle: "",
-      toScore,
-      noPageList: true, //判断接口是否还有数据
-      noDataList: true, //判断接口是否还有数据
-      moreState: 1, // 1 加载更多 2 加载中 3无数据
-      columns: 3, //列的数量
-      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
-      // 查询信息
-      types: {
-        sysTypesSub: "",
-        subOne: "",
-        subTow: "",
-        sysTypes: null,
-        oneSubList: [],
-        towSubList: []
-      },
-      course: {
-        orderField: "studys",
-        topOrder: true,
-        orderAsc: false,
-        pageIndex: 1, // 第几页
-        pageSize: 9 //每页多少条
-      },
-      optionsList: [], //分类数据
-      sceneList: [], //场景
-      keyword: "",
-      anking: "",
-      isFind: false,
-      searchbar: {
-        top: false
-      },
-      ankingList: [],
-      scorelist: [],
-      searchTags: [],
-      queryExpand: true, // true更多，false收起
-      category: null,
-      categorySub: 0,
-      type1: 0,
-      type2: [],
-      type3: 0,
-      type4: 0,
-      status: 1,
-      pager: {
-        total: 40
-      },
-      data: [{}, {}, {}, {}],
-      order: 1,
-      listType: 1,
-      courseList: [],
-      searchRecords: [],
-      hotList: [],
-      totalPages: 1
-    };
-  },
-  mounted() {
-    let screenWidth = window.screen.availHeight;
-    //console.log("screenWidth", screenWidth);
-    if (screenWidth < 1280) {
-      this.course.pageSize = 9;
-      this.columns = 3;
-    } else if (screenWidth < 1600) {
-      this.course.pageSize = 12;
-      this.columns = 4;
-    } else if (screenWidth >= 1600) {
-      this.course.pageSize = 15;
-      this.columns = 5;
-    }
-    //var hasNum=12;
-    //console.log(parseInt(hasNum/this.columns)*this.columns,'this.columns');
-
-    let el_top = document.querySelector("#searchbar");
-    let el_search = document.querySelector("#searchbar");
-    let height = 200;
-    let flag = true;
-    let $this = this;
-    this.getAnkingData();
-    window.addEventListener("scroll",this.handleScroll);
-    if (this.$route.query !== {}) {
-      this.course.keyword = this.$route.query.keyword;
-    }
-    this.getSceneData();
-    this.getTypeData();
-    if (this.course.keyword != undefined) {
-      this.totalPages = 4;
-    }
-    this.search();
-    this.searchterm();
-    this.loadSysTypes();
-    this.getScoreList();
-    this.getHotList();
-    //查询排行榜，页面打开只查询一次
-  },
-  beforeDestroy() {
-    window.removeEventListener("scroll", this.handleScroll);
-  },
-  methods: {
-    jumUX() {
-      window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130", "_blank");
-    },
-    emitInput(val) {
-      this.course.keyword = val;
-      this.searchData();
-    },
-    handleScroll() {
-      let innerHeight = document.querySelector("#couser-list-content")
-        .clientHeight;
-      let outerHeight = document.documentElement.clientHeight;
-      let scrollTop = document.documentElement.scrollTop;
-      if (outerHeight + scrollTop + 350 >= innerHeight) {
-        if (this.moreState == 1 && this.course.pageIndex < 4) {
-          this.loadMore();
-        }
-      }
-      if (scrollTop > 630) {
-        document.querySelector("#fixd-box").style.cssText =
-          "position: fixed;top: -550px;width:242.5px";
-      } else {
-        document.querySelector("#fixd-box").style.cssText = "position: static";
-      }
-    },
-    toNeedCourse() {
-      // 需要先切换标签
-      //this.$store.dispatch('SetCurIdentity',2);
-      //this.$router.push('/need/course?open=new');
-      this.$refs.floatTools.toNeedCourse();
-    },
-    searchData() {
-      this.course.pageIndex = 1;
-      this.noPageList = true; //判断接口是否还有数据
-      this.noDataList = true; //判断接口是否还有数据
-      this.courseList = [];
-      this.totalPages = 4;
-      this.search();
-    },
-    inputOn() {
-      this.$forceUpdate();
-    },
-    ...mapActions({
-      getResOwnerTree: "resOwner/getResOwnerTree",
-      loadResOwners: "resOwner/loadResOwners",
-      getSysTypeTree: "sysType/getSysTypeTree",
-      loadSysTypes: "sysType/loadSysTypes"
-    }),
-    sysTypeName(code) {
-      if (code == "") {
-        return "";
-      }
-      return this.sysTypeMap.get(code);
-    },
-    useHotword(item) {
-      this.$set(this.course, "keyword", item.keyword);
-      this.searchData();
-    },
-    searchterm() {
-      apiSearchterm.list(5, 1).then(res => {
-        if (res.status == 200) {
-          this.searchRecords = res.result;
-        }
-      });
-    },
-    toCourseDetail(item) {
-      if (isNaN(item.type)) {
-        return `${this.webBaseUrl}/course/boeframe?id=${item.id}&type=${
-          item.type
-        }`;
-        //此处使用window.open有问题
-        //window.open(`${this.webBaseUrl}/course/boeframe?id=${item.id}&type=${item.type}`);
-      } else {
-        if (item.type == 10) {
-          return this.webBaseUrl + "/course/micro?id=" + item.id;
-        } else if (item.type == 20) {
-          return this.webBaseUrl + "/course/detail?id=" + item.id;
-        }
-      }
-
-      return "";
-    },
-    orderChange(id) {
-      this.course.orderField = id;
-      this.course.pageIndex = 1;
-      this.noPageList = true; //判断接口是否还有数据
-      this.noDataList = true; //判断接口是否还有数据
-      this.courseList = [];
-      this.totalPages = 1;
-      this.search();
-    },
-    tagsClose(tag, index) {
-      for (let i in this.course) {
-        if (tag.id === this.course[i]) {
-          this.course[i] = "";
-          if (i === "sysType1") {
-            this.types.sysTypes = "";
-          }
-          if (i === "sysType2") {
-            this.types.subOne = "";
-          }
-          if (i === "sysType3") {
-            this.types.subTow = "";
-          }
-          if (i === "type") {
-            this.category = "";
-            this.categorySub = "";
-          }
-          
-
-          this.searchTags.splice(index, 1);
-           if(i === 'type') {
-            this.category = null;
-            this.categorySub = null;
-          }
-          if (i === "sysType1") {
-            this.types.sysTypes = null;
-          }
-          if (i === "sysType2") {
-            this.types.subOne = null;
-          }
-          if (i === "sysType3") {
-            this.types.subTow = null;
-          }
-
-          this.searchData();
-        }
-      }
-    },
-
-    // 分类
-    changeType(num) {
-      this.types.oneSubList = [];
-      this.types.subOne = "0";
-      this.types.towSubList = [];
-      let list = {};
-      if (num !== 0) {
-        list = this.optionsList.find(item => {
-          return item.id === num;
-        });
-      }
-      if (list && list.children) {
-        this.types.oneSubList = list.children;
-      }
-      this.searchData();
-    },
-    // 子级分类
-    changeTypeSub(num) {
-      this.types.subTow = "0";
-      let list = {};
-      if (num !== 0) {
-        apiType.list(1, num).then(res => {
-          if (res.status === 200) {
-            this.types.towSubList = res.result;
-          }
-        });
-      }
-      this.searchData();
-    },
-    //获取场景，保留
-    async getSceneData() {
-      try {
-        const { result, status } = await scene.list(1);
-        if (status === 200) {
-          this.sceneList = result;
-        }
-      } catch (error) {
-        console.log(error);
-      }
-    },
-    //获取分类，此处获取提内容分类
-    async getTypeData() {
-      try {
-        const { result, status } = await apiType.tree(1);
-        if (status === 200) {
-          this.optionsList = result;
-        }
-      } catch (error) {
-        console.log(error);
-      }
-    },
-    loadMore() {
-      this.course.pageIndex += 1;
-      this.search();
-    },
-    async search() {
-      let that = this;
-      if (this.course.keyword) {
-        apiSearchterm.save({ keyword: this.course.keyword, type: 1 });
-      }
-      this.isFind = true;
-      if (this.category === 0) {
-        this.course.type = null;
-      } else if (this.category === 2) {
-        // if (this.categorySub === "") {
-        //   this.course.type = "20";
-        // } else {
-        //   this.course.type = this.categorySub;
-        // }
-      } else {
-        this.course.type = this.category;
-      }
-      if (this.types.sysTypes == 0 || this.types.sysTypes == null) {
-        this.course.sysType1 = "";
-        this.course.sysType2 = "";
-        this.course.sysType3 = "";
-      } else {
-        this.course.sysType1 = this.types.sysTypes;
-      }
-      this.course.sysType2 = this.types.subOne;
-      this.course.sysType3 = this.types.subTow;
-      if (this.course.sysType2 == 0) {
-        this.course.sysType2 = "";
-      }
-      if (this.course.sysType3 == 0) {
-        this.course.sysType3 = "";
-      }
-      this.course.device = 1;
-      this.getTags();
-      //从新课程库中取10条，从老库中取10条
-      let oldPageIndex = 0;
-      let oldCateName = "";
-      let oldParamsType = "";
-      if (this.course.sysType1) {
-        //cateName
-        let courseSysType = this.course.sysType1;
-        let curName = this.optionsList.find(item => {
-          return item.id === courseSysType;
-        });
-        if (curName) {
-          oldCateName = curName.name;
-        }
-      }
-      if (this.category == 20) {
-        oldParamsType = "online-course";
-      } else if (this.category == 30) {
-        oldParamsType = "face-course";
-      } else if (this.category == 40) {
-        oldParamsType = "project";
-      }
-      //if(oldParamsType == '' && oldCateName == '' && this.course.keyword == '') {
-      if (this.searchTags.length == 0) {
-        oldPageIndex = this.course.pageIndex - 3;
-      } else {
-        oldPageIndex = this.course.pageIndex;
-      }
-
-      let oldParams = {
-        type: oldParamsType,
-        page: oldPageIndex,
-        size: this.course.pageSize,
-        keyword: this.course.keyword,
-        sort: "new",
-        cateName: oldCateName
-      };
-      if (this.course.orderField == "id") {
-        //最新
-        oldParams.sort = "new";
-      }
-      if (this.course.orderField == "studys") {
-        //最热
-        oldParams.sort = "hot";
-      }
-      let data = [];
-      let isTopList = [];
-
-      if (this.course.pageIndex > this.totalPages) {
-        //console.log(this.course.pageIndex, this.totalPages, "1");
-        this.noDataList = true;
-        if (this.searchTags.length == 0) {
-          oldParams.page = this.course.pageIndex - this.totalPages;
-        }
-      } else {
-        //console.log(this.course.pageIndex, this.totalPages, "2");
-        if (this.searchTags.length == 0) {
-          if (this.totalPages > 3) {
-            if (this.course.pageIndex <= 3) {
-              this.noDataList = false;
-            } else {
-              this.noDataList = true;
-            }
-          }
-        }
-        // if(this.totalPages == 1 && this.course.pageIndex ==1){
-        //   this.noDataList = true;
-        // }
-      }
-      if (this.course.type == 30 || this.course.type == 40) {
-        this.noPageList = false;
-      }
-      //console.log(this.noDataList, this.totalPages, "this.noDataList");
-      // 隐藏loadMore
-      this.moreState = 2;
-      this.noDataList &&
-        (await apiOldCourse
-          .courseList(oldParams)
-          .then(oldRs => {
-            if (oldRs.status == 200 && oldRs.result.dataList.length > 0) {
-              let list = that.filterConversion(oldRs.result.dataList);
-              //list.name = list.name.replace(/<[^>]+>|&[^>]+;/g,"").trim();
-              data.push(...list);
-              that.moreState = 1;
-            } else {
-              that.noDataList = false;
-            }
-          })
-          .catch(err => {
-            that.noDataList = false;
-          }));
-
-      this.noPageList &&
-        (await apiCoursePortal
-          .pageList(this.course)
-          .then(res => {
-            if (res.status == 200 && res.result.list.length > 0) {
-              this.totalPages = res.result.totalPages;
-              let courseIds = [];
-              res.result.list.forEach(item => {
-                item.name = this.$keywordActiveShow(
-                  item.name,
-                  this.course.keyword
-                );
-                item.couretitle = this.$keywordActiveShow(
-                  item.name,
-                  this.course.keyword
-                )
-                  .replace(/<[^>]+>|&[^>]+;/g, "")
-                  .trim(); //去掉所有的html标签和&nbsp;之类的特殊符合
-                item.authorInfo = {
-                  aid: "",
-                  name: "",
-                  orgInfo: "",
-                  avatar: "",
-                  code: ""
-                };
-                courseIds.push(item.id);
-                if (item.isTop) {
-                  isTopList.push(item);
-                } else {
-                  data.push(item);
-                }
-              });
-              that.loadCouserTeacher(res.result.list, courseIds);
-              // data.push(...res.result.list);
-              that.moreState = 1;
-            } else {
-              that.noPageList = false;
-            }
-          })
-          .catch(err => {
-            that.noPageList = false;
-          }));
-      if (this.course.orderField == "id") {
-        //最新
-        data.sort(this.pcompare("publishTime", false));
-      }
-      if (this.course.orderField == "studys") {
-        //最热
-        data.sort(this.pcompare("studys", false));
-      }
-      this.courseList.push(...isTopList, ...data);
-      if (this.noDataList == false && this.noPageList == false) {
-        this.moreState = 3;
-      }
-    },
-    pcompare(prop, rev) {
-      if (rev === undefined) {
-        rev = 1;
-      } else {
-        rev = rev ? 1 : -1;
-      }
-      return function(obj1, obj2) {
-        let val1 = obj1[prop],
-          val2 = obj2[prop];
-        return val1 < val2 ? rev * -1 : rev * 1;
-      };
-    },
-    filterConversion(data) {
-      let list = [];
-      data.forEach((item, index) => {
-        list.push({
-          coverImg: item.cover[0].url,
-          name: item.title,
-          type: item.type,
-          id: item.id,
-          studys: Number(item.enrollSuccess), // Number(), //学习人数
-          score: item.score,
-          publishTime: item.releaseDate,
-          authorInfo: {
-            avatar: "",
-            name: ""
-          }
-        });
-      });
-      return list;
-    },
-    loadCouserTeacher(list, ids) {
-      let that = this;
-      // 先查课程关联教师iD
-      apiCourse.getTeacherByCourseIDs(ids).then(cres => {
-        if (cres.status == 200) {
-          let userIds = [];
-          list.forEach((item, index) => {
-            cres.result.some(courseTeahcer => {
-              if (courseTeahcer.courseId == item.id) {
-                if (courseTeahcer.teacherIds) {
-                  userIds.push(courseTeahcer.teacherIds[0]);
-                  item.authorInfo.aid = courseTeahcer.teacherIds[0];
-                  item.authorInfo.name = courseTeahcer.names[0];
-                }
-                return true;
-              } else {
-                return false;
-              }
-            });
-          });
-          //that.loadCourseAuthorInfo(list,userIds);
-        }
-      });
-    },
-    loadCourseAuthorInfo(list, ids) {
-      //加载作者信息，头像，机构信息
-      if (ids.length == 0) {
-        return;
-      }
-      const noReapetIds = [...new Set(ids)];
-      apiUser.getByIds(ids).then(res => {
-        if (res.status == 200) {
-          list.forEach((item, index) => {
-            res.result.some(author => {
-              if (author.aid == item.authorInfo.aid) {
-                item.authorInfo = author;
-                return true;
-              } else {
-                return false;
-              }
-            });
-          });
-        } else {
-          console.log("加载课程信息失败:" + res.error);
-          //this.$message.error(res.message);
-        }
-      });
-    },
-    getTags() {
-      this.searchTags = [];
-      let courseData = deepClone(this.course);
-      for (let i in courseData) {
-        if (
-          courseData[i] !== "" &&
-          i !== "pageIndex" &&
-          i !== "pageSize" &&
-          i !== "orderField" &&
-          i !== "orderAsc" &&
-          i !== "topOrder" &&
-          i !== "device" &&
-          courseData[i] !== null &&
-          courseData[i] !== undefined
-        ) {
-          let id = courseData[i];
-          if (i == "type" && courseData[i] !== 0) {
-            courseData[i] = courseType(courseData[i]);
-          }
-          if (i == "sysType1" || i == "sysType2" || i == "sysType3") {
-            if (courseData[i] !== "0") {
-              courseData[i] = this.sysTypeName(courseData[i]);
-            }
-          }
-          if (i == "type" && courseData[i] === 0) {
-            courseData[i] = "在线课";
-          }
-          if (courseData[i] !== "0") {
-            this.searchTags.push({
-              id: id,
-              name: courseData[i]
-            });
-          }
-        }
-      }
-    },
-    // goTarget(href) {
-    //   window.open(this.webBaseUrl+href, "_blank");
-    // },
-    showInApply() {
-      this.inapply.show = true;
-    },
-    findOrg() {
-      //
-    },
-    pushEnter(type) {
-      this.type1.push(type);
-    },
-    deleteOut(type) {
-      this.type1 = this.type.filter(item => item != type);
-    },
-    chooseShow(type) {
-      return this.type1.some(item => item == type);
-    },
-    getAnkingData() {
-      apiCourse.ranking().then(res => {
-        if (res.status == 200) {
-          this.ankingList = res.result;
-        }
-      });
-    },
-    getScoreList() {
-      apiCourse.scorelist(5).then(res => {
-        if (res.status == 200) {
-          this.scorelist = res.result;
-        }
-      });
-    },
-    getHotList() {
-      apiCourse.studyCounts(5).then(res => {
-        if (res.status == 200) {
-          this.hotList = res.result;
-        }
-      });
-    },
-    jumpRouter(item) {
-      console.log(item.type, "item.type");
-      // return console.log(id,type,"fihkj1")
-      if (item.type == 20) {
-        //录播课
-        //  window.open(`${this.webBaseUrl}/course/detail?id=${id}`)
-        this.$router.push(`/course/detail?id=${item.id}`);
-      }
-      if (item.type == 10) {
-        //微课
-        //  window.open(`${this.webBaseUrl}/course/micro?id=${id}`)
-        this.$router.push(`/course/micro?id=${item.id}`);
-      }
-    },
-    jumpRouter2(item) {
-      // console.log(item,"土豪包括九年")
-      let type = item.courseType;
-      let id = item.courseId;
-
-      //console.log(item.type,type,'item.type');
-      // return console.log(id,type,"fihkj1")
-      if (type == 20) {
-        //录播课
-        //  window.open(`${this.webBaseUrl}/course/detail?id=${id}`)
-        this.$router.push(`/course/detail?id=${id}`);
-      }
-      if (type == 10) {
-        //微课
-        //  window.open(`${this.webBaseUrl}/course/micro?id=${id}`)
-        this.$router.push(`/course/micro?id=${id}`);
-      }
-    }
-  }
-};
-</script>
-
-<style scoped lang="scss">
-::v-deep .el-radio-button{
-  margin-right:0px;
-}
-::v-deep .title-line-ellipsis {
-  // width: 100%;
-  display: -webkit-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  box-sizing: border-box;
-  word-break: break-all;
-}
-::v-deep .el-card__body {
-  padding: 0;
-}
-::v-deep .bacolor:nth-child(odd) {
-  background-color: #fff;
-  padding: 0 5px;
-}
-::v-deep .bacolor:nth-child(even) {
-  background-color: #f6f6f6;
-  padding: 0 5px;
-}
-.Uxtext {
-  font-weight: 450;
-  margin-top: 5px;
-  margin-left: 15px;
-  font-size: 14px;
-  color: #3d3d3d;
-  cursor: pointer;
-  position: relative;
-}
-.uxicon {
-  font-size: 10px;
-  position: absolute;
-  top: -14px;
-  left: 98%;
-}
-// .el-radio-button{
-//   margin-right: 10px;
-//   margin-bottom: 10px;
-
-//   .el-radio-button__inner{
-//     background: #fff;
-//     border: none;
-//     height: 20px;
-//   }
-// }
-::v-deep .el-radio-button__inner,
-.el-radio-group {
-  vertical-align: top;
-}
-::v-deep .el-radio-button__inner {
-  background: none;
-}
-::v-deep .el-radio-button:first-child .el-radio-button__inner {
-  border-left: none;
-
-  // border-radius: 4px 0 0 4px;
-  //box-shadow: none!important;
-}
-// .el-row{
-//   display: flex;
-//   flex-wrap: wrap;
-// }
-.item-title {
-  // margin-top: 10px;
-  // margin-bottom: 5px;
-  // margin-right: 10px;
-  // margin: 10px;
-  margin: 10px 10px 10px 0;
-  //font-size: 14px;
-  font-weight: 600;
-  color: #333333;
-  // line-height: 20px;
-}
-.item-line {
-  padding-left: 2px;
-  height: 20px;
-  background: #ddd;
-}
-.course-card {
-  // width: 290px;
-  margin-bottom: 15px;
-  position: relative;
-  ::v-deep .cor-praises {
-    position: absolute;
-    left: 0;
-    top: 0;
-    .interact-bar-btn {
-      .interact-bar-value {
-        display: none;
-      }
-    }
-  }
-  .cor-icon {
-    position: absolute;
-    left: 100px;
-    top: 54px;
-    border-radius: 50%;
-    background: rgba(88, 138, 252, 0.37);
-
-    .el-icon-caret-right {
-      font-size: 36px;
-      color: #588afc;
-    }
-  }
-  .course-image-box {
-    position: relative;
-    height: 148px;
-    width: 100%;
-    .course-image {
-      width: 100%;
-      height: 148px;
-    }
-    .course-type {
-      position: absolute;
-      top: 5px;
-      right: 0px;
-      width: 90px;
-      height: 30px;
-      line-height: 30px;
-      text-align: center;
-      background-color: #292828;
-      opacity: 0.4;
-      border-top-left-radius: 15px;
-      border-bottom-left-radius: 15px;
-      color: #ffffff;
-    }
-    .course-type-title {
-      position: absolute;
-      top: 5px;
-      right: 0px;
-      width: 90px;
-      height: 30px;
-      line-height: 30px;
-      text-align: center;
-      color: #ffffff;
-    }
-    .course-flag {
-      height: 26px;
-      position: absolute;
-      top: 15px;
-      right: 0;
-    }
-    .course-tip {
-      width: 100%;
-      height: 26px;
-      position: absolute;
-      bottom: 0;
-      padding: 0 10px;
-      color: #fff;
-      font-size: 14px;
-      .course-study-count {
-        float: left;
-      }
-      .course-time {
-        float: right;
-      }
-    }
-  }
-  .course-title {
-    // height: 70px;
-    margin: 10px 0;
-    padding: 0px 15px;
-    font-size: 18px;
-    font-weight: 600;
-    color: #343434;
-  }
-  .course-author {
-    margin: 5px 15px;
-    padding-bottom: 10px;
-    display: flex;
-    justify-content: space-between;
-    .course-author-left {
-      font-size: 12px;
-      line-height: 30px;
-      color: #666;
-    }
-    // .course-author-right{
-    //   padding-top: 5px;
-    // }
-  }
-  .course-score {
-    padding: 5px 15px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 10px;
-
-    .course-score-star {
-      flex: 1;
-    }
-    .course-score-value {
-      color: #ffb30f;
-      font-family: "Arial";
-      // font-size: 30px;
-    }
-    .course-score-no {
-      font-size: 12px;
-      color: #ffb30f;
-    }
-  }
-}
-.course-score-no {
-  text-align: right;
-  font-size: 12px;
-  color: #ffb30f;
-  line-height: 30px;
-}
-.course-score-value {
-  font-size: 14px;
-  color: #ffb30f;
-  margin-left: 32px;
-  line-height: 30px;
-  font-family: "Arial";
-  // font-size: 30px;
-}
-.study-num {
-  line-height: 30px;
-  font-size: 12px;
-
-  color: #8590a6;
-}
-.btn-label {
-}
-.btn-label {
-  position: relative;
-  display: inline-block;
-  outline: 0;
-  span {
-    padding: 7px 15px;
-    font-size: 12px;
-    border-radius: 0;
-    white-space: nowrap;
-    background: #fff;
-    border: 1px solid #dcdfe6;
-    font-weight: 500;
-    border-left: 0;
-    color: #606266;
-    -webkit-appearance: none;
-    text-align: center;
-    box-sizing: border-box;
-    outline: 0;
-    margin: 0;
-    position: relative;
-    cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-  }
-}
-.searchbar {
-  background-color: #ffffff;
-  // border: 1px solid #f3f3f3;
-  // width: 900px;
-  // padding: 5px 20px;
-}
-
-.fixed {
-  position: fixed;
-  top: 0px;
-  background-color: #f0f0f0;
-  z-index: 999;
-  height: 50px;
-}
-.content-div {
-  .quyer-tag {
-    // margin-left: 10px;
-    .order-class {
-      color: #666666;
-      text-align: left;
-      border: 1px solid #dfdfdf;
-      padding: 10px 20px;
-    }
-    .actice {
-      background: #3e7fff;
-      color: #fff;
-    }
-  }
-  /* 分页div */
-  .pagination-div {
-    text-align: center;
-    padding: 10px 0;
-    margin: 10px;
-    .pag-text {
-      border: 1px solid #292828;
-      padding: 10px 20px;
-      border-radius: 20px;
-      background: #fff;
-      cursor: pointer;
-    }
-    .pag-text-msg {
-      padding: 10px 20px;
-      background: #fff;
-    }
-  }
-  .search-div {
-    background: #fff;
-    padding: 10px 25px;
-    ::v-deep .el-input {
-      width: 420px;
-      height: 38px;
-      margin-bottom: 13px;
-      .el-input__inner {
-        height: 38px;
-        border-radius: 0;
-      }
-      .el-input-group__append {
-        width: 44px;
-        height: 38px;
-        border: 0;
-        padding: 0;
-        background: #3e7fff;
-        border-radius: 0;
-        .el-button {
-          margin: 0;
-          border: 0;
-          width: 100%;
-          height: 38px;
-          padding: 0;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          .el-icon-search {
-            color: #fff;
-            font-size: 22px;
-          }
-        }
-      }
-    }
-    // .tip{
-    //   color:#999999;
-    //   font-size: 12px;
-    //   >span{
-    //     margin-right: 8px;
-    //     cursor: pointer;
-    //   }
-    // }
-    .search-item {
-      // padding: 10px 0;
-    }
-    .search-item:not(:last-child) {
-      // border-bottom: 1px solid #dfdfdf;
-    }
-    .search-item-sub {
-      // margin-top: 10px;
-    }
-  }
-  .search-div-collapse {
-    display: block;
-  }
-  .search-div-expand {
-    // display: none;
-  }
-  .search-div-more {
-    text-align: center;
-  }
-
-  .order-div {
-    padding: 10px 15px 0 0px;
-  }
-  .data-content {
-    padding: 5px 0px;
-    .course-card {
-      // width: 290px;
-      margin-bottom: 15px;
-      position: relative;
-      .course-image-box {
-        position: relative;
-        .course-image {
-          width: 288px;
-          height: 148px;
-        }
-        .course-flag {
-          height: 26px;
-          position: absolute;
-          top: 15px;
-          right: 0;
-        }
-        .course-tip {
-          width: 100%;
-          height: 26px;
-          position: absolute;
-          bottom: 0;
-          padding: 0 10px;
-          color: #fff;
-          font-size: 14px;
-          .course-study-count {
-            float: left;
-          }
-          .course-time {
-            float: right;
-          }
-        }
-      }
-      .course-info-box {
-        padding: 15px;
-        .course-info-title {
-          font-size: 18px;
-          font-weight: 600;
-          color: #343434;
-          height: 48px;
-        }
-        .course-other-info {
-          height: 40px;
-          margin-top: 10px;
-          .course-author {
-            float: left;
-            height: 40px;
-            font-size: 12px;
-            color: #666666;
-            line-height: 40px;
-            img {
-              margin-right: 10px;
-              width: 30px;
-              border: 1px solid #eee;
-              border-radius: 50%;
-              vertical-align: middle;
-            }
-          }
-          .course-score-info {
-            float: right;
-            height: 40px;
-            line-height: 40px;
-            .course-score {
-              color: #f8a114;
-              font-family: "Arial";
-              font-size: 36px;
-            }
-            .course-score-title {
-              font-size: 14px;
-              color: #787878;
-            }
-          }
-        }
-      }
-      .cardmark {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: rgba(101, 101, 101, 0.8);
-        pointer-events: none;
-        border-radius: 5px;
-        padding: 10px;
-        opacity: 0;
-        -webkit-transition: all 1.5s;
-        -moz-transition: all 1.5s;
-        -ms-transition: all 1.5s;
-        -o-transition: all 1.5s;
-        transition: all 1.5s;
-        .cardmark-name {
-          font-size: 18px;
-          line-height: 30px;
-          font-weight: 600;
-          color: #fff;
-        }
-        .cardmark-info {
-          color: #fff;
-          font-size: 14px;
-          line-height: 20px;
-        }
-      }
-    }
-    .course-card:hover .cardmark {
-      opacity: 1;
-    }
-  }
-}
-.course-form {
-  width: 100%;
-  margin: 10px 0;
-  ::v-deep.el-button {
-    width: 100%;
-    color: #fff;
-  }
-}
-
-.right-box {
-  .add-btn {
-    width: 100%;
-    padding: 15px 0;
-  }
-  .ranking-card {
-    margin-top: 0px;
-  }
-
-  .ranking-data {
-    margin: 10px 0;
-    color: #999999;
-  }
-}
-.ranking-title {
-  line-height: 34px;
-  font-size: 15px;
-  color: #333333;
-  .center-titlt {
-    font-size: 15px;
-    color: #333333;
-  }
-  .center {
-    text-align: right;
-  }
-  img {
-    margin-top: 5px;
-  }
-}
-</style>
diff --git a/src/views/portal/course/Index.vue b/src/views/portal/course/Index.vue
index 4681bbf7..2c11f677 100644
--- a/src/views/portal/course/Index.vue
+++ b/src/views/portal/course/Index.vue
@@ -1,9 +1,9 @@
 <template>
   <div id="couser-list-content" class="couser-list-content">
     <div class="course-banner">
-      <portal-header current="course" @emitInput="emitInput"></portal-header>
+      <portal-header current="course" textColor="#fff" @emitInput="emitInput"></portal-header>
     </div>
-    <div class="">
+    <div style="padding-top:30px" class="">
       <div class="xcontent2">
         <div class="xcontent2-main content-div">
           <div class="search-div" style="margin-right:36px">
@@ -83,6 +83,7 @@
                 <a :href="toCourseDetail(cinfo)">
                   <div class="course-image-box">
                     <course-image :course="cinfo"></course-image>
+                  <span v-if="cinfo.type == 20 || 10" class="course-type-left">录播课</span>
                   </div>
                   <div class="course-title two-line-ellipsis" :title="cinfo.title"   v-html="cinfo.name"></div>
                   <div class="course-info">
@@ -121,7 +122,7 @@
                       上传课程
                 </div>
               </div>
-              <div class="portal-ranking ranking-bg">
+              <div class="portal-ranking-list ranking-bg">
                 <div class="ranking-title">好评榜</div>
                 <ul class="ranking-data">
                    <li class="list-info" v-for="(item, index) in scorelist" :key="index" style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
@@ -142,14 +143,15 @@
                         </span>
                         <span class="portal-title-desc title-line-ellipsis" v-if="item.images == ''" style="font-size: 14px;">{{ item.name }}</span>
                         <span class="portal-title-desc" v-else style="font-size: 14px;">
-                          <img style="width:96px;height:52px" :src="fileBaseUrl + item.images" alt=""/>
+                          <img v-if="index == 0"  class="rankimg"  :src="fileBaseUrl + item.images" alt=""/>
                           <span class="portal-images-title two-line-ellipsis">{{ item.name }}</span>
                         </span>
 
                       <div class="list-active">
                          <div class="list-content">
                            <div class="list-img">
-                            <course-image :course="item"></course-image>
+                            <!-- <course-image :course="item"></course-image> -->
+                           <img style="width:96px;height:52px" :src="fileBaseUrl + item.images" alt=""/>
                             <span v-if="item.type < 21" class="course-type">录播</span>
                             <span v-if="item.type==30" class="course-type">线下课</span>
                             <span v-if="item.type==40" class="course-type">学习项目</span>
@@ -166,7 +168,7 @@
                    </li>
                 </ul>
               </div>
-              <div style="margin-top:26px" class="portal-ranking ranking-bg1">
+              <div style="margin-top:26px" class="portal-ranking-list ranking-bg1">
                 <div class="ranking-title">人气榜</div>
                 <ul class="ranking-data">
                    <li class="list-info" v-for="(item, index) in ankingList" :key="index" style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
@@ -187,14 +189,15 @@
                         </span>
                         <span class="portal-title-desc title-line-ellipsis" v-if="item.images == ''" style="font-size: 14px;">{{ item.name }}</span>
                         <span class="portal-title-desc" v-else style="font-size: 14px;">
-                          <img style="width:96px;height:52px" :src="fileBaseUrl + item.images" alt=""/>
+                          <img v-if="index == 0" class="rankimg"  :src="fileBaseUrl + item.images" alt=""/>
                           <span class="portal-images-title two-line-ellipsis">{{ item.name }}</span>
                         </span>
 
                         <div class="list-active">
                          <div class="list-content">
                            <div class="list-img">
-                            <course-image :course="item"></course-image>
+                            <!-- <course-image :course="item"></course-image> -->
+                           <img style="width:96px;height:52px" :src="fileBaseUrl + item.images" alt=""/>
                             <span v-if="item.type < 21" class="course-type">录播</span>
                             <span v-if="item.type==30" class="course-type">线下课</span>
                             <span v-if="item.type==40" class="course-type">学习项目</span>
@@ -211,7 +214,7 @@
                    </li>
                 </ul>
               </div>
-              <div style="margin-top:26px" class="portal-ranking ranking-bg2">
+              <div style="margin-top:26px" class="portal-ranking-list ranking-bg2">
                 <div class="ranking-title">热度榜</div>
                 <ul class="ranking-data">
                    <li class="list-info" v-for="(item, index) in hotList" :key="index" style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
@@ -231,14 +234,15 @@
                              <img src="/images/list05.png" alt="">
                         </span>
                         <span class="portal-title-desc title-line-ellipsis list-lidex" v-if="item.images == ''" style="font-size: 14px;">{{ item.courseName }}</span>
-                        <span class="portal-title-desc span" v-else style="font-size: 14px;">
-                          <img style="width:96px;height:52px" :src="fileBaseUrl + item.images" alt=""/>
+                        <span class="portal-title-desc " v-else style="font-size: 14px;">
+                          <img v-if="index == 0" class="rankimg"  :src="fileBaseUrl + item.images" alt=""/>
                           <span class="portal-images-title two-line-ellipsis">{{ item.courseName }}</span>
                         </span>
                         <div class="list-active">
                          <div class="list-content">
                            <div class="list-img">
-                            <course-image :course="item"></course-image>
+                            <!-- <course-image :course="item"></course-image> -->
+                           <img style="width:96px;height:52px" :src="fileBaseUrl + item.images" alt=""/>
                             <span v-if="item.type < 21" class="course-type">录播</span>
                             <span v-if="item.type==30" class="course-type">线下课</span>
                             <span v-if="item.type==40" class="course-type">学习项目</span>
@@ -430,11 +434,10 @@ export default {
     couresreso(){
       let key = 'course';
       apiPlace.detail(key).then(res=>{
-        console.log(res)
-        let lmj =  JSON.parse(res.result.content)
-        // console.log(lmj)
-        this.resonimg = lmj[0]
-        console.log(this.resonimg.image)
+        console.log(res,'lmj')
+        let Imageres =  JSON.parse(res.result.content);
+        this.resonimg = Imageres[0]
+        // console.log(this.resonimg,'111')
       })
     },
     jumUX() {
@@ -452,6 +455,7 @@ export default {
         .clientHeight;
       let outerHeight = document.documentElement.clientHeight;
       let scrollTop = document.documentElement.scrollTop;
+      let outerWidth = document.querySelector(".xcontent2-minor").clientWidth;
       if (outerHeight + scrollTop + 350 >= innerHeight) {
         if (this.moreState == 1 && this.course.pageIndex < 4) {
           this.loadMore();
@@ -459,7 +463,7 @@ export default {
       }
       if (scrollTop > 830) {
         document.querySelector("#fixd-box").style.cssText =
-          "position: fixed;top: -914px;";
+          "position: fixed;top: -914px;width:"+outerWidth+"px";
       } else {
         document.querySelector("#fixd-box").style.cssText = "position: static";
       }
@@ -833,12 +837,34 @@ export default {
 </script>
 
 <style scoped lang="scss">
+  
+  .course-type-left {
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        width: 60px;
+        height: 24px;
+        line-height: 24px;
+        text-align: center;
+        background-color: #f99000;
+        border-radius: 2px 4px 2px 14px;
+        font-size: 12px;
+        color: #ffffff;
+        -moz-user-select: none;
+        /*火狐*/
+        -webkit-user-select: none;
+        /*webkit浏览器*/
+        -ms-user-select: none;
+        /*IE10*/
+        -khtml-user-select: none;
+        /*早期浏览器*/
+        user-select: none;
+      }
   .list-lidex{
     display: inline-block;
     display: flex;
   }
 .course-resources{
-  width: 410px;
   margin-top: 24px;
 
   img{
@@ -892,13 +918,13 @@ export default {
       .course-type{
         position: absolute;
         left: 0;
-        bottom: 0;
+        bottom: 26%;
         height: 20;
         line-height: 20px;
         font-size: 12px;
         color: #FFFFFF;
         padding: 0px 8px;
-        background: #387DF7;
+        background: #387DF7 ;
         border-radius: 0px 12px 0px 0px;
       }
     }
diff --git a/src/views/portal/course/Micro.vue b/src/views/portal/course/Micro.vue
index 26e60f8c..d0c6da5e 100644
--- a/src/views/portal/course/Micro.vue
+++ b/src/views/portal/course/Micro.vue
@@ -1,13 +1,21 @@
 <template>
   <div>
-    <portal-header current="course" :goSearch="1"></portal-header>
+    <div class="xpage-coures-banner">
+        <portal-header current="course" textColor="#fff" :goSearch="1"></portal-header>
+        <div class="xcontent">
+            <div class="banner-crumbs">
+               <router-link to="/course"><span class="crumbs-first">课程列表</span></router-link>
+               <span class="crumbs-line">  &gt; </span>
+               <span class="crumbs-last">课程详情</span>
+            </div>
+            <div class="bcourse-title">
+               <!-- <span>{{courseInfo.name}}</span> -->
+                <!-- <span>{{courseInfo.summary}}</span>  -->
+                <!-- <span class="bcourse-score">{{toScore(courseInfo.score)}}分</span> -->
+            </div>
+        </div>
+    </div>
     <div class="portal-content xcontent">
-      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb-nav">
-        <el-breadcrumb-item :to="{ path: '/course' }">课程列表</el-breadcrumb-item>
-        <el-breadcrumb-item>课程详情</el-breadcrumb-item>
-      </el-breadcrumb>
-      <el-row :gutter="10">
-        <el-col :span="24">
           <el-card :body-style="{ padding: '0px', 'min-height': '500px' }">
             <el-row class="detail">
               <el-col :span="18">
@@ -217,8 +225,7 @@
               </el-card>
             </el-col>
           </el-row>
-        </el-col>
-      </el-row>
+        
     </div>
     <portal-footer></portal-footer>
   </div>
diff --git a/src/views/portal/follow/index.vue b/src/views/portal/follow/index.vue
index fd095823..5503e11a 100644
--- a/src/views/portal/follow/index.vue
+++ b/src/views/portal/follow/index.vue
@@ -1,6 +1,8 @@
 <template>
     <div class="follow-page">
-        <top></top>
+        <div class="follow-banner">
+          <portal-header current="follow" textColor="#fff" @emitInput="emitInput"></portal-header>
+        </div>
         <div>
             <div class="home-page-left">
                 <div class="book-input">
@@ -52,9 +54,9 @@
 
     </div>
   </template>
-  
+
   <script>
-    import top from '../../../layout/components/TopNav/Index.vue'
+    import portalHeader from "@/components/PortalHeader.vue";
     import UcHeader from '@/components/HomePage/homePage.vue'
     import CaseList from '@/components/HomePage/caseList.vue'
     import CourseList from '@/components/HomePage/courseList.vue'
@@ -66,7 +68,7 @@
     import BookList from "@/components/HomePage/bookList.vue"
 
     export default{
-        components:{top,UcHeader,CaseList,CourseList,NoteList,PutList,AnswerList,ArticleList,FollowList,BookList},
+        components:{portalHeader,UcHeader,CaseList,CourseList,NoteList,PutList,AnswerList,ArticleList,FollowList,BookList},
         data(){
             return{
                 input:'',
@@ -80,11 +82,13 @@
        }
       }
   </script>
-  
+
   <style lang="scss" scoped>
+    .follow-banner{
+      background-color: #0078FC;
+    }
      .follow-page{
         background: #FFFFFF;
-        padding-top: 72px;
         height: 100vh;
        ::v-deep .el-tabs__active-bar{
           height: 4px;
@@ -171,7 +175,7 @@
                         color: #666666;
                        }
                     }
-                    
+
                 }
                 .ach-title{
                     font-size: 18px;
@@ -221,4 +225,3 @@
         // }
      }
   </style>
-  
\ No newline at end of file
diff --git a/src/views/portal/qa/Answer.vue b/src/views/portal/qa/Answer.vue
index 986a2ca4..d5942db6 100644
--- a/src/views/portal/qa/Answer.vue
+++ b/src/views/portal/qa/Answer.vue
@@ -1,9 +1,9 @@
 <template>
   <div id="answer-detail">
     <div class="qa-banner">
-      <portal-header current="qa" :goSearch="4"></portal-header>
+      <portal-header current="qa" textColor="#000000" :goSearch="4"></portal-header>
     </div>
-    <div >
+    <div style="padding-top:30px" >
       <div class="xcontent2">
         <div style="margin-right: 30px;" class="xcontent2-main">
           <div v-if="noData">
@@ -31,7 +31,7 @@
                     </div>
                  </div>
                  <div class="content-inter">
-                   <interactBar v-if="detailData.id" :type="4" :comments="false" :data="detailData" :views="false"> </interactBar>
+                   <interactBar v-if="detailData.id" :type="4" :shares="false" :comments="false"  :data="detailData" :answers="true" :clickAnswer="true"  :views="false"> </interactBar>
                 </div>
 
                </div>
@@ -887,7 +887,6 @@ export default {
     background: url('/images/qa-banner.png');
   }
 .course-resources{
-  width: 410px;
   margin-top: 26px;
   img{
     width: 100%;
diff --git a/src/views/portal/qa/Detail.vue b/src/views/portal/qa/Detail.vue
index 154544f0..d9679db5 100644
--- a/src/views/portal/qa/Detail.vue
+++ b/src/views/portal/qa/Detail.vue
@@ -3,7 +3,7 @@
      <div class="qa-banner">
       <portal-header current="qa" :goSearch="4"></portal-header>
     </div>
-    <div class="portal-content xcontent" >
+    <div style="padding-top:30px" class="portal-content xcontent" >
       <div class="xrow" style="display: flex;justify-content: space-between;">
          <div style="flex: 1;" class="xcol content-div">
 
@@ -743,7 +743,7 @@ export default {
     background: url('/images/qa-banner.png');
   }
 .course-resources{
-  width: 410px;
+  // width: 410px;
   img{
     width: 100%;
     height: 100%;
diff --git a/src/views/portal/qa/Index.vue b/src/views/portal/qa/Index.vue
index 7d845f30..b5096dd4 100644
--- a/src/views/portal/qa/Index.vue
+++ b/src/views/portal/qa/Index.vue
@@ -1,10 +1,10 @@
 <template>
   <div id="qa-list-content" class="qa-list-content">
     <div class="qa-banner">
-      <portal-header current="qa" class="qa-nav" @emitInput="emitInput"></portal-header>
+      <portal-header current="qa" textColor="#000000" class="qa-nav" @emitInput="emitInput"></portal-header>
     </div>
 
-    <div class="portal-content">
+    <div style="padding-top:30px" class="portal-content">
 
       <div  class="xcontent2">
         <div  class="xcontent2-main" style="margin-right: 30px;background-color: #fff;padding-top: 50px;">
@@ -55,7 +55,7 @@
                         <div style="width: 120px;">
                           <author :avatar="qa.authorInfo.avatar" :name="qa.authorInfo.name" :sex="qa.authorInfo.sex"></author>
                         </div>
-                        <div><interactBar nodeWidth="60px" :readonly="true"  :type="4" :data="qa" @addAnswers="qaAnswer(qa)" :shares="true" :comments="false" :answers="true" :clickAnswer="true" :views="false"></interactBar></div>
+                        <div><interactBar nodeWidth="60px" :readonly="true"  :type="4" :data="qa" @addAnswers="qaAnswer(qa)" :shares="false" :comments="false" :answers="true" :clickAnswer="true" :views="false"></interactBar></div>
                       </div>
                     </div>
                   </div>
@@ -85,13 +85,13 @@
                         <ul class="ranking-data">
                           <li v-for="(item, index) in ankingList" :key="index" style="margin-top:30px;line-height: 22px;cursor: pointer;">
                         <span class="portal-right-text orange-one" v-if="index==0" style="margin-right:94px">
-                          <img src="/images/list-01.png" alt="">
+                          <img src="/images/listblue01.png" alt="">
                         </span>
                         <span class="portal-right-text orange-tow" v-if="index==1" style="margin-right:94px">
-                            <img src="/images/list02.png" alt="">
+                            <img src="/images/listblue02.png" alt="">
                         </span>
                         <span class="portal-right-text orange-three" v-if="index==2" style="margin-right:94px">
-                            <img src="/images/list03.png" alt="">
+                            <img src="/images/listblue03.png" alt="">
                         </span>
                         <span class="portal-right-text" v-if="index==3" style="margin-right:94px">
                              <img src="/images/list04.png" alt="">
@@ -444,7 +444,6 @@ export default {
   background: #387DF7 !important;
 }
 .course-resources{
-  width: 410px;
   margin-top: 26px;
   img{
     border-radius: 8px;
diff --git a/src/views/study/coursenew.vue b/src/views/study/coursenew.vue
index cc27f976..88be09f9 100644
--- a/src/views/study/coursenew.vue
+++ b/src/views/study/coursenew.vue
@@ -1,696 +1,799 @@
 <template>
-    <div>
-        <div class="coures-bg">
-             <portal-header current="course" :goSearch="1"></portal-header>
-               <el-breadcrumb style="margin-top:50px;margin-left:82px" separator-class="el-icon-arrow-right" class="breadcrumb-nav" >
-                    <el-breadcrumb-item :to="{ path: '/course' }">课程列表</el-breadcrumb-item>
-                    <el-breadcrumb-item class="hear-nav">课程详情</el-breadcrumb-item>
-                </el-breadcrumb>
-                <div class="coures-title">
-                    <div>{{courseInfo.name}}</div>
-                    <!-- <span>{{courseInfo.summary}}</span>  -->
-                    <h6>评分{{toScore(courseInfo.score)}}分</h6>
-                </div>
+  <div>
+    <div class="xpage-coures-banner">
+      <portal-header current="course" textColor="#fff" :goSearch="1"></portal-header>
+      <div style="margin: 0px 80px;">
+        <div class="banner-crumbs">
+          <router-link to="/course"><span class="crumbs-first">课程列表</span></router-link>
+          <span class="crumbs-line"> &gt; </span>
+          <span class="crumbs-last">课程详情</span>
         </div>
-        <div class="coures-content">
-           <div class="coures-play">
-               <div  class="player" style="width: 100%;height: 100%;border: 1px solid #ffffff;background-color: #FFFFFF;overflow: auto;">
-                   <div>
-                <div v-if="resType == null || resType == 0">
-                  <!--先显示视频图片-->
-                  <course-image v-if="courseInfo.id != ''" :course="courseInfo"></course-image>
+        <div class="bcourse-title">
+          <span>{{courseInfo.name}}</span>
+          <!-- <span>{{courseInfo.summary}}</span>  -->
+          <span class="bcourse-score" v-if="courseInfo.score>0">{{toScore(courseInfo.score)}} 分</span>
+          <span class="bcourse-score" v-else>无评分</span>
+        </div>
+      </div>
+    </div>
+    <div class="course-content">
+      <div class="course-playbox">
+        <div class="course-player">
+          <div>
+            <div v-if="resType == null || resType == 0">
+              <!--先显示视频图片-->
+              <course-image v-if="courseInfo.id != ''" :course="courseInfo"></course-image>
+            </div>
+            <div v-if="resType == 10" style="position: relative;">
+              <videoPlayer id="myVideoPlayer" v-if="resType == 10" :src="blobUrl" @onPlayerPlaying="onPlayerPlaying"
+                :initTime="contentData.lastStudyTime" :notePlay="notePlay" @onPlayerPlay="onPlayerPlay"
+                :isDrag="curriculumData.isDrag" @onFullscreen="onFullscreen" @onPlayerPause="onPlayerPause"
+                @onPlayerEnded="onPlayerEnded"></videoPlayer>
+              <div class="player-box" v-if="playerBoxShow">
+                <div class="player-praise" style="cursor: pointer;">
+                  <div @click="praiseContent">
+                    <img class="icon-small" v-if="isPraise" :src="require('@/assets/images/icon/praise-active.png')" />
+                    <img class="icon-small" v-else :src="require('@/assets/images/icon/zhan.png')" />
+                    <!-- {{ courseInfo.praises }} -->
+                    <div style="color:#fff;cursor: pointer;">赞</div>
+                  </div>
+                  <div style="margin-left: 15px;cursor: pointer;" @click="treadContent">
+                    <img class="icon-small" v-if="isTrample"
+                      :src="require('@/assets/images/icon/trample-active.png')" />
+                    <img class="icon-small" v-else :src="require('@/assets/images/icon/cai.png')" />
+                    <!-- {{ courseInfo.trampleCount }} -->
+                    <div style="color:#fff;cursor: pointer;">踩</div>
+                  </div>
                 </div>
-                <div v-if="resType == 10" style="position: relative;">
-                  <videoPlayer  id="myVideoPlayer" v-if="resType == 10"
-                    :src="blobUrl"
-                    @onPlayerPlaying="onPlayerPlaying"
-                    :initTime="contentData.lastStudyTime"
-                    :notePlay="notePlay"
-                    @onPlayerPlay="onPlayerPlay"
-                    :isDrag="curriculumData.isDrag"
-                    @onFullscreen="onFullscreen"
-                    @onPlayerPause="onPlayerPause"
-                    @onPlayerEnded="onPlayerEnded"
-                  ></videoPlayer>
-                  <div class="player-box" v-if="playerBoxShow">
-                    <div class="player-praise" style="cursor: pointer;">
-                      <div @click="praiseContent">
-                        <img class="icon-small" v-if="isPraise" :src="require('@/assets/images/icon/praise-active.png')" />
-                        <img class="icon-small" v-else :src="require('@/assets/images/icon/zhan.png')" />
-                        <!-- {{ courseInfo.praises }} -->
-                        <div style="color:#fff;cursor: pointer;">赞</div>
-                      </div>
-                      <div style="margin-left: 15px;cursor: pointer;" @click="treadContent">
-                        <img class="icon-small" v-if="isTrample" :src="require('@/assets/images/icon/trample-active.png')" />
-                        <img class="icon-small" v-else :src="require('@/assets/images/icon/cai.png')" />
-                        <!-- {{ courseInfo.trampleCount }} -->
-                        <div style="color:#fff;cursor: pointer;">踩</div>
-                      </div>
-                    </div>
-                    <div v-if="!scoreInfo.has" class="player-rate">
-                      <el-rate v-model="scoreInfo.score" text-color="#ff9900" score-template="{value}" void-color="#fff" @change="addScore"></el-rate>
-                    </div>
-                      <div v-if="scoreInfo.has" style="padding-top: 5px;display: flex;">
-                    <div class="player-rate" style="padding-left: 35px;">
-                      <el-rate disabled v-model="courseInfo.score" :allow-half="true" ></el-rate>
-                    </div>
-                    <span class="score-text" style="margin-top:35px">
-                      <span style="color:#ffb30f;">{{ toScore(courseInfo.score) }}</span>
-                      <span style="font-size: 12px;color: #fff">分</span>
-                    </span>
+                <div v-if="!scoreInfo.has" class="player-rate">
+                  <el-rate v-model="scoreInfo.score" text-color="#ff9900" score-template="{value}" void-color="#fff"
+                    @change="addScore"></el-rate>
+                </div>
+                <div v-if="scoreInfo.has" style="padding-top: 5px;display: flex;">
+                  <div class="player-rate" style="padding-left: 35px;">
+                    <el-rate disabled v-model="courseInfo.score" :allow-half="true"></el-rate>
+                  </div>
+                  <span class="score-text" style="margin-top:35px">
+                    <span style="color:#ffb30f;">{{ toScore(courseInfo.score) }}</span>
+                    <span style="font-size: 12px;color: #fff">分</span>
+                  </span>
 
-                   </div>
-                  </div>
-                </div>
-                <div v-if="resType == 20">
-                  <div class="con-audio">
-                    <div class="con-audio-title">{{ contentData.contentName }}</div>
-                    <div class="con-audio-player">
-                      <audioPlayer
-                        v-if="resType == 20"
-                        :url="fileBaseUrl + curriculumData.url"
-                        :name="contentData.contentName"
-                        @onPlaying="audioPlaying"
-                        :isDrag="curriculumData.isDrag"
-                        @onPlay="audioPlay"
-                        @onPause="audioPause"
-                        @onPlayEnd="audioEnd"
-                      ></audioPlayer>
-                    </div>
-                  </div>
-                </div>
-                <div v-if="resType == 40">
-                  <div style="padding: 10px;color: #ed0000; " v-if="curCFile.converStatus < 2 && !contentData.content">
-                    <div>此课程内容无法预览，请联系管理员</div>
-                  </div>
-                    <div style="padding: 10px;color: #ed0000;" v-if="curCFile.converStatus == 3 && !contentData.content">
-                        此课程内容无法预览，请联系管理员
-                    </div>
-                  <pdfPreview :autoScroll="true" v-if="resType == 40" :filePath="fileBaseUrl + contentData.content"></pdfPreview>
-                </div>
-                <div v-if="resType == 41"><div style="padding: 20px;" v-html="contentData.content"></div></div>
-                <div v-if="resType == 52">
-                  <div v-if="contentData.content != ''">
-                    <div class="hyper-link" v-if="conLink.openType == 2">
-                      <div class="hyper-link-row">{{ contentData.contentName }}</div>
-                      <div class="hyper-link-row">{{ conLink.url }}</div>
-                    </div>
-                    <div v-if="conLink.openType == 1"><iframe :src="conLink.url" style="width: 100%;border:0px;min-height: 473px;" frameborder="0"></iframe></div>
-                  </div>
-                </div>
-                <div v-if="resType == 60"><homework v-if="resType == 60 && studyId != ''" :studyId="studyId" :content="contentData"></homework></div>
-                <div v-if="resType == 61"><exam v-if="resType == 61 && studyId != '' " :studyId="studyId" :content="contentData"></exam></div>
-                <div v-if="resType == 62" style="padding:5px">
-                  <assess v-if="resType == 62 && studyId != '' && contentData.id" :studyId="studyId" :content="contentData"></assess>
                 </div>
               </div>
-               </div>
-            <div style="margin: 24px 0px;background-color: #FFFFFF;" class="info">
-                <div class="coure-tab">
-                    <div @click="coutab" :class="courestab == true? 'coureactive' : ''">课程评论<span class=""></span> </div>
-                    <div @click="coutab" :class="courestab == false? 'coureactive' : ''">课程笔记<span class=""></span> </div>
+            </div>
+            <div v-if="resType == 20">
+              <div class="con-audio">
+                <div class="con-audio-title">{{ contentData.contentName }}</div>
+                <div class="con-audio-player">
+                  <audioPlayer v-if="resType == 20" :url="fileBaseUrl + curriculumData.url"
+                    :name="contentData.contentName" @onPlaying="audioPlaying" :isDrag="curriculumData.isDrag"
+                    @onPlay="audioPlay" @onPause="audioPause" @onPlayEnd="audioEnd"></audioPlayer>
                 </div>
-                <div v-show="courestab" class="coures-comments" style="margin-left:17px">
-                   <comments v-if="courseInfo.id && courseInfo.id != ''" :obj-type="1" :obj-id="courseInfo.id" :toUsers="toUsers"></comments>
+              </div>
+            </div>
+            <div v-if="resType == 40">
+              <div style="padding: 10px;color: #ed0000; " v-if="curCFile.converStatus < 2 && !contentData.content">
+                <div>此课程内容无法预览，请联系管理员</div>
+              </div>
+              <div style="padding: 10px;color: #ed0000;" v-if="curCFile.converStatus == 3 && !contentData.content">
+                此课程内容无法预览，请联系管理员
+              </div>
+              <pdfPreview :autoScroll="true" v-if="resType == 40" :filePath="fileBaseUrl + contentData.content">
+              </pdfPreview>
+            </div>
+            <div v-if="resType == 41">
+              <div style="padding: 20px;" v-html="contentData.content"></div>
+            </div>
+            <div v-if="resType == 52">
+              <div v-if="contentData.content != ''">
+                <div class="hyper-link" v-if="conLink.openType == 2">
+                  <div class="hyper-link-row">{{ contentData.contentName }}</div>
+                  <div class="hyper-link-row">{{ conLink.url }}</div>
                 </div>
-                <div v-show="!courestab" class="coures-note">
+                <div v-if="conLink.openType == 1"><iframe :src="conLink.url"
+                    style="width: 100%;border:0px;min-height: 473px;" frameborder="0"></iframe></div>
+              </div>
+            </div>
+            <div v-if="resType == 60">
+              <homework v-if="resType == 60 && studyId != ''" :studyId="studyId" :content="contentData"></homework>
+            </div>
+            <div v-if="resType == 61">
+              <exam v-if="resType == 61 && studyId != '' " :studyId="studyId" :content="contentData"></exam>
+            </div>
+            <div v-if="resType == 62" style="padding:5px">
+              <assess v-if="resType == 62 && studyId != '' && contentData.id" :studyId="studyId" :content="contentData">
+              </assess>
+            </div>
+          </div>
+        </div>
+        <div class="course-control">
+            <div class="control-tab">
+              <div @click="heartabone" :class="tab == 1 ? 'control-tab-active' : ' '">
+                <i class="el-icon-reading" style="margin-right:9px;margin-left:9px"></i>课程单元
+              </div>
+              <div @click="heartabtwo" :class="tab == 2 ? 'control-tab-active' : ' '">
+                <i class="el-icon-edit" style="margin-right:9px;margin-left:9px"></i>我的笔记
+              </div>
+            </div>
+            <!-- 课程单元  -->
+            <div class="course-units" v-if="tab == 1">
+              <div style="min-height: 200px;overflow-y: auto;">
+                <div class="catalog" v-if="courseInfo.type == 20">
+                  <div v-for="(item, index) in catalogTree" :key="index" :name="index">
+                    <div style="margin: 10px 0px;font-weight: 700;">{{item.section.name}}</div>
+                    <div class="units-info" :class="{'units-active':contentData.id == ele.id}" @click="showRes(ele,i,index)" v-for="(ele, i) in item.children" :key="i">
+                      <img v-if="contentData.id == ele.id" src="../../../public/images/playicon.png" alt=""> {{i+1}}.
+                      {{ ele.contentName }}
+                    </div>
+                  </div>
+                </div>
+                <div v-else class="catalog">
+                  <!-- contentList -->
+                  <div class="units-info" v-for="(list, index) in contentList" :key="index" :name="index"  @click="showRes(list,i,index)" :class="{'units-active':contentData.id == list.id}">
+                    <!-- <div class="units-info" :class="{'units-active':contentData.id == ele.id}" @click="showRes(ele,i,index)" v-for="(ele, i) in item.children" :key="i"> -->
+                    <img v-if="contentData.id == list.id" src="../../../public/images/playicon.png" alt=""> {{index+1}}.
+                    {{ list.contentName }}
+                    <!-- </div> -->
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- 我的笔记 -->
+            <div class="mynote" v-show="tab == 2">
+              <my-note :data="courseInfo" @videoLocation="videoLocation" @onPlayVideo="onPlayVideo"
+                :score="courseInfo.score"></my-note>
+            </div>
+        </div>
+      </div>
+      <div class="course-infobox">
+        <div class="course-info">
+          <div style="background-color: #fff;">
+                <div class="course-info-tab">
+                  <div @click="coutab(1)" :class="courestab == 1? 'course-info-tab-active' : ''">课程介绍<span class=""></span> </div>
+                  <div @click="coutab(2)" :class="courestab == 2? 'course-info-tab-active' : ''">课程评论<span class=""></span> </div>
+                  <div @click="coutab(3)" :class="courestab == 3? 'course-info-tab-active' : ''">课程笔记<span class=""></span> </div>
+                </div>
+                <div v-show="courestab==1" style="margin-left:17px;padding-top: 20px;">
+                    <div style="padding: 30px;">
+                        <div class="course-info-row"><img src="@/assets/images/icon/remark-iocn.png" alt="" srcset=""> 目标人群：<div class="course-info-text">{{courseInfo.forUsers}}</div></div>
+                        <div class="course-info-row"><img src="@/assets/images/icon/remark-iocn.png" alt="" srcset=""> 课程价值：<div class="course-info-text">{{courseInfo.value}}</div></div>
+                        <div class="course-info-row"><img src="@/assets/images/icon/remark-iocn.png" alt="" srcset=""> 详细介绍：<div class="course-info-text"  v-html="courseInfo.summary"></div></div>
+                    </div>
+                </div>
+                <div v-show="courestab==2" class="coures-comments" style="margin-left:17px">
+                  <comments v-if="courseInfo.id && courseInfo.id != ''" :obj-type="1" :obj-id="courseInfo.id"
+                    :toUsers="toUsers"></comments>
+                </div>
+                <div v-show="courestab==3" class="coures-note">
                   <note-comments v-if="courseInfo.id && courseInfo.id != ''" :obj-type="6" :obj-id="courseInfo.id" :name="courseInfo.name"></note-comments>
                 </div>
-            </div>
-           </div>
-           <div class="coures-infobox">
-               <div class="coures-info">
-               <div class="hear-tab">
-                   <div @click="heartabone" :class="tab == 1 ? 'tab-active' : ' '"><i class="el-icon-reading" style="margin-right:9px;margin-left:9px"></i>课程单元</div>
-                   <div @click="heartabtwo" :class="tab == 2 ? 'tab-active' : ' '"><i class="el-icon-edit" style="margin-right:9px;margin-left:9px"></i>我的笔记</div>
-                   
-               </div>
-               <!-- 课程单元  -->
-               <div class="course-units" v-if="tab == 1">
-                <div style="min-height: 500px;">
-              <div class="catalog" v-if="courseInfo.type == 20">
-                  <div v-for="(item, index) in catalogTree" :key="index" :name="index">
-                      <div class="units-info" :class="{'units-active':contentData.id == ele.id}" @click="showRes(ele,i,index)" v-for="(ele, i) in item.children" :key="i">
-                        <img v-if="contentData.id == ele.id" src="../../../public/images/playicon.png" alt="">  1. {{ ele.contentName }}
-                      </div>
-                  </div>
-              </div>
-              <div v-else class="catalog">
-                <!-- contentList -->
-                <div class="units-info" v-for="(list, index) in contentList" :key="index" :name="index" @click="showRes(list,i,index)" :class="{'units-active':contentData.id == list.id}">
-                      <!-- <div class="units-info" :class="{'units-active':contentData.id == ele.id}" @click="showRes(ele,i,index)" v-for="(ele, i) in item.children" :key="i"> -->
-                        <img v-if="contentData.id == list.id" src="../../../public/images/playicon.png" alt="">  1. {{ list.contentName }}
-                      <!-- </div> -->
-                  </div>
-              </div>
-            </div>
-               </div>
-               <!-- 我的笔记 -->
-               <div class="mynote" v-show="tab == 2">
-                 <my-note :data="courseInfo" @videoLocation="videoLocation" @onPlayVideo="onPlayVideo" :score="courseInfo.score"></my-note>
-               </div>
-           </div>
-           <div class="coures-tearch">
-                   <div class="tearch-top"><img src="../../../public/images/tearch-top.png" alt=""></div>
+          </div>
+        </div>
+        <div class="course-teacher">
+          <div class="cteacher-top">
+              <div class="cteacher-top"><img width="100%" height="15px" src="../../../public/images/tearch-top.png" alt=""></div>
+              <div class="cteacher-top-title">课程讲师</div>
+          </div>
 
-               <el-card :body-style="{ padding: '0px' }" class="teachers">
-              <div class="top">
-                  课程讲师
-              </div>
-              <div>
-                <div class="teacher" v-for="(item, idx) in teachers" :key="idx">
-                  <div class="teacher-avator">
-                    <!-- <div class="teacher-text" v-if="item.authorInfo.avatar == ''">{{userAvatarText(item.teacherName)}}</div> -->
-                    <el-avatar v-if="item.authorInfo.avatar !== ''" :src="fileBaseUrl + item.authorInfo.avatar" shape="circle" :size="50"></el-avatar>
-                     <div v-else class="teacher-text">
-                        <div v-if="item.authorInfo.sex === 1 "><img src="../../../public/images/Avatarman.png" alt=""></div>
-                        <div v-else><img src="../../../public/images/Avatarwoman.png" alt=""></div>
-
-                     </div>
-                  </div>
-                  <div class="teacher-info">
-                    <div class="teacher-name">{{ item.teacherName }}</div>
-                    <div class="teacher-remark" v-html="item.remark"></div>
-                  </div>
-                  <div style="padding-top:15px">
-                    <el-button type="primary" @click="toFollow(item)" size="small">+ 关注</el-button>
-                  </div>
+          <div class="cteacher-list">
+            <div class="teacher" v-for="(item, idx) in teachers" :key="idx">
+              <div class="teacher-avator">
+                <!-- <div class="teacher-text" v-if="item.authorInfo.avatar == ''">{{userAvatarText(item.teacherName)}}</div> -->
+                <div v-if="item.authorInfo.avatar !== ''">
+                  <el-avatar  :src="fileBaseUrl + item.authorInfo.avatar" shape="circle" :size="50"></el-avatar>
+                </div>
+                <div v-else class="teacher-text">
+                  <div v-if="item.authorInfo.sex === 1 "><img src="../../../public/images/Avatarman.png" alt=""></div>
+                  <div v-else><img src="../../../public/images/Avatarwoman.png" alt=""></div>
                 </div>
               </div>
-            </el-card>
-           </div>
-           </div>
-         
+              <div class="teacher-info">
+                <div class="teacher-name">
+                    <span> {{ item.teacherName }}</span>
+                    <span style="font-size: 12px; color:#666666 ;">( {{item.authorInfo.orgInfo}} )</span>
+                </div>
+                <div class="teacher-remark" v-html="item.authorInfo.sign"></div>
+              </div>
+              <div style="padding-top:15px">
+                <el-button type="primary" @click="toFollow(item)" size="small">+ 关注</el-button>
+              </div>
+            </div>
+          </div>
+
         </div>
+      </div>
     </div>
+    <!-- <div><portal-footer></portal-footer></div> -->
+  </div>
 </template>
 <script>
-import { mapGetters } from 'vuex';
-import portalHeader from "@/components/PortalHeader.vue";
-import comments from "@/components/Portal/comments.vue";
-import noteComments from "@/components/Portal/noteComment.vue";
-import interactBar from "@/components/Portal/interactBar.vue";
-import audioPlayer from '@/components/AudioPlayer/index.vue';
-import videoPlayer from '@/components/VideoPlayer/index.vue';
-import hyperLink from '@/components/Course/hyperLink.vue';
-import studyUtil from '@/utils/study.js';
-import {encrypt} from '@/utils/jsencrypt.js';
-import cookies from 'vue-cookies';
-import apiStudy from '@/api/modules/courseStudy.js';
-import apiVideoStudy from "@/api/modules/videoStudy.js";
-import apiCourseGrade from '@/api/modules/courseGrade.js';
-import apiPraises from '@/api/modules/praises.js';
-import apiTrample from '@/api/modules/trample.js';
-import apiCoursePortal from '@/api/modules/coursePortal.js';
-import apiUser from '@/api/system/user.js';
-import apiCourseFile from '@/api/modules/courseFile.js';
-import { resListMap, resOwnerListMap, courseType, getType, toScore,userAvatarText } from '@/utils/tools.js';
-import pdfPreview from '@/components/PdfPreview/index.vue';
-import courseImage from '@/components/Course/courseImage.vue';
-import exam from '@/components/Course/exam';
-import homework from '@/components/Course/homework';
-import assess from '@/components/Course/assess';
-import myNote from '../../components/Course/myNote.vue';
-import apiFollow from "@/api/phase2/userfollow.js"
-export default {
-  name: "atticle",
-  components: {courseImage, portalHeader, hyperLink, comments, homework, exam, interactBar, assess, pdfPreview, audioPlayer, videoPlayer,myNote,noteComments },
-  data(){
-      return{
-        notePlay:null,
-        intTimeNote:'',
-        courestab:true,
-        curCFile:{
-        converStatus:4,
-      },
-      radio:'',
-      interactRuning:false,
-      playerBoxShow:false,
-      userAvatarText,
-      publicPath: process.env.VUE_APP_PUBLIC_PATH,
-      showiframe: false,
-      toScore,
-      courseId: '',//当前课程的id
-      studyId: '', //当前学习的id
-      initContentId: '', //初始化当前学习的内容节
-      blobUrl:'',//播放的文件地址，新添加，采用blob方式
-      contentData: {
-        studyItemId:'',
-        status:1
-      }, //当前的显示的内容
-      conLink: { openType: 1, url: '' }, //对于超连接的内容
-      curriculumData:{url:'',isDrag:true,completeSetup:0,setupTage:0,second:0},// 课件内容
-      courseInfo: { id: '', name: '' }, //课程信息
-      totalContent: 0, //课程内容数量
-      pageCount: 0,
-      currentPage: 0,
-      fileBaseUrl: this.$Constants.fileBaseUrl,
-      contentList: [],
-      sectionList: [],
-      teachers: [],
-      toUsers: [], //对于@教师的处理
-      getType: getType,
-      ctabName: 'catalog',
-      resType: null,
-      activeNames: [0, 1, 2, 3, 4,5,6,7,8,9],
-      scoreInfo: {
-        dlgShow: false,
-        score: 5,
-        has: false
-      },
-      isPraise: false,
-      isTrample: false,
-      appendStartTime: null, //记录追加的开始时间
-      appendHandle:null,
-      isAppendTime:false,//是否追加学习时长
-      appentId:'',//当前追加的学习时长的id
-      appentInterval:30000,//追加学习时间的间隔 30秒加一次
-      handleTimeout:null,
-      completed:[],
-        tab:1,
-        notetab:1,
-      }
-  },
-  mounted() {
-    this.$watermark.set(this.userInfo.name + this.userInfo.loginName);
-    this.courseId = this.$route.query.id;
-    this.loadData();
-  },
-  computed: {
-    ...mapGetters(['userInfo']),
-    catalogTree() {
-      let treeList = [];
-      this.completed = [];
-      let $this = this;
-      $this.sectionList.forEach(sec => {
-        let treeNode = { section: sec, children: [] };
-        sec.status = 1;
-        let finishCount = 0;
-        $this.contentList.forEach(c => {
-          if (c.csectionId == sec.id) {
-            if (c.status > 1) {
-              sec.status = 2;
-              if(c.status == 9){
-                finishCount++;
-              }
-            }
-            if(c.status == 9) {
-              $this.completed.push(c.id);
-            }
-            treeNode.children.push(c);
-          }
-        });
-        if (finishCount == treeNode.children.length) {
-          sec.status = 9;
-        }
-        treeList.push(treeNode);
-      });
-      return treeList;
-    }
-  },
-  methods: {
-    toFollow(item) {
-          apiFollow.save(item.teacherId).then(res=>{
-            if(res.status == 200) {
-              this.$message.success('关注成功！');
-            } else {
-              this.$message.error(res.message);
-            }
-          })
+  import { mapGetters } from 'vuex';
+  import portalHeader from "@/components/PortalHeader.vue";
+  import portalFooter from "@/components/PortalFooter.vue";
+  import comments from "@/components/Portal/comments.vue";
+  import noteComments from "@/components/Portal/noteComment.vue";
+  import interactBar from "@/components/Portal/interactBar.vue";
+  import audioPlayer from '@/components/AudioPlayer/index.vue';
+  import videoPlayer from '@/components/VideoPlayer/index.vue';
+  import hyperLink from '@/components/Course/hyperLink.vue';
+  import studyUtil from '@/utils/study.js';
+  import { encrypt } from '@/utils/jsencrypt.js';
+  import cookies from 'vue-cookies';
+  import apiStudy from '@/api/modules/courseStudy.js';
+  import apiVideoStudy from "@/api/modules/videoStudy.js";
+  import apiCourseGrade from '@/api/modules/courseGrade.js';
+  import apiPraises from '@/api/modules/praises.js';
+  import apiTrample from '@/api/modules/trample.js';
+  import apiCoursePortal from '@/api/modules/coursePortal.js';
+  import apiUser from '@/api/system/user.js';
+  import apiCourseFile from '@/api/modules/courseFile.js';
+  import {
+    resListMap,
+    resOwnerListMap,
+    courseType,
+    getType,
+    toScore,
+    userAvatarText
+  } from '@/utils/tools.js';
+  import pdfPreview from '@/components/PdfPreview/index.vue';
+  import courseImage from '@/components/Course/courseImage.vue';
+  import exam from '@/components/Course/exam';
+  import homework from '@/components/Course/homework';
+  import assess from '@/components/Course/assess';
+  import myNote from '../../components/Course/myNote.vue';
+  import apiFollow from "@/api/phase2/userfollow.js"
+  export default {
+    name: "atticle",
+    components: {
+      courseImage,
+      portalHeader,
+      hyperLink,
+      comments,
+      homework,
+      exam,
+      interactBar,
+      assess,
+      pdfPreview,
+      audioPlayer,
+      videoPlayer,
+      myNote,
+      noteComments,
+      portalFooter
+    },
+    data() {
+      return {
+        notePlay: null,
+        intTimeNote: '',
+        courestab: 2,//默认是课程评论
+        curCFile: {
+          converStatus: 4,
         },
-      onPlayVideo(time) {
+        radio: '',
+        interactRuning: false,
+        playerBoxShow: false,
+        userAvatarText,
+        publicPath: process.env.VUE_APP_PUBLIC_PATH,
+        showiframe: false,
+        toScore,
+        courseId: '', //当前课程的id
+        studyId: '', //当前学习的id
+        initContentId: '', //初始化当前学习的内容节
+        blobUrl: '', //播放的文件地址，新添加，采用blob方式
+        contentData: {
+          studyItemId: '',
+          status: 1
+        }, //当前的显示的内容
+        conLink: {
+          openType: 1,
+          url: ''
+        }, //对于超连接的内容
+        curriculumData: {
+          url: '',
+          isDrag: true,
+          completeSetup: 0,
+          setupTage: 0,
+          second: 0
+        }, // 课件内容
+        courseInfo: {
+          id: '',
+          name: ''
+        }, //课程信息
+        totalContent: 0, //课程内容数量
+        pageCount: 0,
+        currentPage: 0,
+        fileBaseUrl: this.$Constants.fileBaseUrl,
+        contentList: [],
+        sectionList: [],
+        teachers: [],
+        toUsers: [], //对于@教师的处理
+        getType: getType,
+        ctabName: 'catalog',
+        resType: null,
+        activeNames: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+        scoreInfo: {
+          dlgShow: false,
+          score: 5,
+          has: false
+        },
+        isPraise: false,
+        isTrample: false,
+        appendStartTime: null, //记录追加的开始时间
+        appendHandle: null,
+        isAppendTime: false, //是否追加学习时长
+        appentId: '', //当前追加的学习时长的id
+        appentInterval: 30000, //追加学习时间的间隔 30秒加一次
+        handleTimeout: null,
+        completed: [],
+        tab: 1,
+        notetab: 1,
+      }
+    },
+    mounted() {
+      this.$watermark.set(this.userInfo.name + this.userInfo.loginName);
+      this.courseId = this.$route.query.id;
+      this.loadData();
+    },
+    computed: {
+      ...mapGetters(['userInfo']),
+      catalogTree(){
+        let treeList = [];
+        this.completed = [];
+        let $this = this;
+        $this.sectionList.forEach(sec => {
+          let treeNode = {
+            section: sec,
+            children: []
+          };
+          sec.status = 1;
+          let finishCount = 0;
+          $this.contentList.forEach(c => {
+            if (c.csectionId == sec.id) {
+              if (c.status > 1) {
+                sec.status = 2;
+                if (c.status == 9) {
+                  finishCount++;
+                }
+              }
+              if (c.status == 9) {
+                $this.completed.push(c.id);
+              }
+              treeNode.children.push(c);
+            }
+          });
+          if (finishCount == treeNode.children.length) {
+            sec.status = 9;
+          }
+          treeList.push(treeNode);
+        });
+        return treeList;
+      }
+    },
+    methods: {
+      toFollow(item) {
+        apiFollow.save(item.teacherId).then(res => {
+          if (res.status == 200) {
+            this.$message.success('关注成功！');
+          } else {
+            this.$message.error(res.message);
+          }
+        })
+      },
+      onPlayVideo(time){
         this.playerBoxShow = false;
         this.notePlay = null;
-        setTimeout(()=>{
+        setTimeout(() => {
           this.notePlay = time;
-        },1000)
+        }, 1000)
       },
-    // 笔记功能
-      videoLocation() {// 记录笔记视频位置
+      // 笔记功能
+      videoLocation() { // 记录笔记视频位置
         this.$store.dispatch("SetIntTimeNote", this.intTimeNote);
       },
-      coutab(){
-         this.courestab = !this.courestab;
+      coutab(n) {
+        this.courestab =n;
       },
-         createPlayUrl(fid,u){
-      let nowDate=new Date();
-      let ctime=parseInt(nowDate.getTime()/1000);
-      let beforeUrl=parseInt(nowDate.getTime()/1000)+'/'+fid;
-      //console.log(beforeUrl,'beforeUrl');
-      let urlSign=encodeURIComponent(encrypt(beforeUrl));
-      //console.log(urlSign,'urlSign');
-      cookies.set('PLAYSIGN_TIME', ctime);//写客户端的cookie保存
-      //以下判断是为了区分本地环境和服务器环境
-      if(process.env.NODE_ENV == 'development'){
-        this.blobUrl=process.env.VUE_APP_FILE_BASE_URL+u;
-      }else{
-        this.blobUrl=process.env.VUE_APP_BASE_API+'/xboe/m/course/cware/resource?sign='+urlSign;
-      }
-      //console.log(this.blobUrl,'this.blobUrl');
-    },
-    widthOpen(url) {
-      window.open(url, '_blank');
-    },
-    showRes(r,i,index) {    //i:子节下标，index:章下标
-      if(i!=undefined && index!=undefined && r.status<9) {
-        if(this.courseInfo.orderStudy) {
-          //判断上个是否学完
-          if(i == 0) {
-            if(index > 0) { //第一章 第一节
-              let preCatalog=this.catalogTree[index-1];
-              let last=preCatalog.children[preCatalog.children.length-1];
-              if(last.status!=9){
+      createPlayUrl(fid, u) {
+        let nowDate = new Date();
+        let ctime = parseInt(nowDate.getTime() / 1000);
+        let beforeUrl = parseInt(nowDate.getTime() / 1000) + '/' + fid;
+        //console.log(beforeUrl,'beforeUrl');
+        let urlSign = encodeURIComponent(encrypt(beforeUrl));
+        //console.log(urlSign,'urlSign');
+        cookies.set('PLAYSIGN_TIME', ctime); //写客户端的cookie保存
+        //以下判断是为了区分本地环境和服务器环境
+        if (process.env.NODE_ENV == 'development') {
+          this.blobUrl = process.env.VUE_APP_FILE_BASE_URL + u;
+        } else {
+          this.blobUrl = process.env.VUE_APP_BASE_API + '/xboe/m/course/cware/resource?sign=' + urlSign;
+        }
+        //console.log(this.blobUrl,'this.blobUrl');
+      },
+      widthOpen(url) {
+        window.open(url, '_blank');
+      },
+      showRes(r, i, index) { //i:子节下标，index:章下标
+        if (i != undefined && index != undefined && r.status < 9) {
+          if (this.courseInfo.orderStudy) {
+            //判断上个是否学完
+            if (i == 0) {
+              if (index > 0) { //第一章 第一节
+                let preCatalog = this.catalogTree[index - 1];
+                let last = preCatalog.children[preCatalog.children.length - 1];
+                if (last.status != 9) {
+                  this.$message.warning('请按顺序学习！');
+                  return;
+                }
+              }
+            } else {
+              let pre = this.catalogTree[index].children[i - 1];
+              if (pre.status != 9) {
                 this.$message.warning('请按顺序学习！');
                 return;
               }
             }
-          }else{
-            let pre=this.catalogTree[index].children[i-1];
-            if(pre.status!=9){
-               this.$message.warning('请按顺序学习！');
-                return;
-            }
-          }
-          //判断是否是第一个未学完的
-          let isAllow=false;
-          let has=this.catalogTree.some(treeNode=>{
-             let hasNo=treeNode.children.some(child=>{
-                 if(child.status<9){
-                  if(child.id==r.id){
-                    isAllow=true;
+            //判断是否是第一个未学完的
+            let isAllow = false;
+            let has = this.catalogTree.some(treeNode => {
+              let hasNo = treeNode.children.some(child => {
+                if (child.status < 9) {
+                  if (child.id == r.id) {
+                    isAllow = true;
                   }
                   return true;
-                 }else{
+                } else {
                   return false;
-                 }
-                 
-             });
-             return hasNo;
-          });
-          if(has){
-            if(!isAllow){
-              this.$message.warning('请按顺序学习！');
-              return;
+                }
+
+              });
+              return hasNo;
+            });
+            if (has) {
+              if (!isAllow) {
+                this.$message.warning('请按顺序学习！');
+                return;
+              }
             }
           }
         }
-      }
 
-      this.playerBoxShow=false;
-      //显示内容部分
-      let $this = this;
-      this.resType = r.contentType;
-      this.contentData = r;
-      this.contentData.name = this.courseInfo.name;
-      this.saveStudyDuration();
+        this.playerBoxShow = false;
+        //显示内容部分
+        let $this = this;
+        this.resType = r.contentType;
+        this.contentData = r;
+        this.contentData.name = this.courseInfo.name;
+        this.saveStudyDuration();
 
-      if(r.contentType == 10 || r.contentType == 20) {
+        if (r.contentType == 10 || r.contentType == 20) {
           if (r.content.startsWith('\{')) {
-              this.curriculumData = JSON.parse(r.content);
-            } else {
-              this.curriculumData.url = r.content;
-            }
-            //let url=process.env.VUE_APP_BASE_API+'/xboe/m/course/file/show?cf='+this.curriculumData.url;
-            //let url=this.fileBaseUrl+this.curriculumData.url;
-            this.createPlayUrl(r.contentRefId,this.curriculumData.url);
-      } else if (r.contentType == 40) {
-        // if (r.content != '' && r.content.indexOf('.pdf') == -1) {
+            this.curriculumData = JSON.parse(r.content);
+          } else {
+            this.curriculumData.url = r.content;
+          }
+          //let url=process.env.VUE_APP_BASE_API+'/xboe/m/course/file/show?cf='+this.curriculumData.url;
+          //let url=this.fileBaseUrl+this.curriculumData.url;
+          this.createPlayUrl(r.contentRefId, this.curriculumData.url);
+        } else if (r.contentType == 40) {
+          // if (r.content != '' && r.content.indexOf('.pdf') == -1) {
           apiCourseFile.detail(r.contentRefId).then(cfrs => {
             if (cfrs.status == 200) {
               r.content = cfrs.result.previewFilePath;
               this.curCFile = cfrs.result;
-              if(cfrs.result.previewFilePath == '' && cfrs.result.filePath.indexOf('pdf') > -1) {
+              if (cfrs.result.previewFilePath == '' && cfrs.result.filePath.indexOf('pdf') > -1) {
                 r.content = cfrs.result.filePath;
-                this.curCFile.converStatus=2;
+                this.curCFile.converStatus = 2;
               }
-              if(r.content && r.content.indexOf('.pdf')>-1){
-                this.curCFile.converStatus=2;
+              if (r.content && r.content.indexOf('.pdf') > -1) {
+                this.curCFile.converStatus = 2;
               }
             } else {
               $this.$message.error('加载pdf课件文件失败');
             }
           });
-        // }
-      } else if (r.contentType == 52) {
-        this.isAppendTime=false;
-        if (r.content.startsWith('\{')) {
-          this.conLink = JSON.parse(r.content);
-        } else {
-          this.conLink.url = r.content;
-          this.conLink.openType = 1;
-        }
-        if (this.conLink.openType == 2) {
-          //直接设置完成状态
-          this.widthOpen(this.conLink.url);
-        }
-        //this.conLink=
-      } else if (r.contentType == 61) {
-        // 考试
-      } else if (r.contentType == 60) {
-        // 作业
-      } else if (r.contentType == 62) {
-        // 评估
-        //评估不需要查找，因为内容就是content中
-        console.log('评估处理');
-      }
-      if(this.contentData.status<2){
-         this.contentData.status=2;//进行中
-      }
-      if(this.contentData.contentType>20){ //非视频类的
-        this.isAppendTime=true;
-        this.appendStudyTime();
-        this.handleTimeout= setTimeout(function() {$this.saveStudyInfo();}, 5000); //5秒后记录学习完成
-      }
-
-    },
-    // handleChange(val) {
-    //   console.log(val);
-    // },
-    loadScorePraiseAndTrample() {
-      //加载是否请过分
-      apiCourseGrade.has(this.courseId).then(rs => {
-        if (rs.status == 200 && rs.result) {
-          this.scoreInfo.has = true;
-        }
-      });
-      apiPraises.has(1, this.courseId).then(rs => {
-        if (rs.status == 200 && rs.result) {
-          this.isPraise = true;
-        }
-      });
-      apiTrample.has(this.courseId).then(rs => {
-        if (rs.status == 200 && rs.result) {
-          this.isTrample = true;
-        }
-      });
-    },
-    addScore() {
-      let that = this;
-      let postData = {
-        courseId: this.courseInfo.id,
-        studyId: this.studyId,
-        score: this.scoreInfo.score
-      };
-      if (this.scoreInfo.score > 0) {
-        apiCourseGrade.grade(postData).then(rs => {
-          if (rs.status == 200){
-            this.$message.success('打分成功，谢谢您的打分');
-            that.scoreInfo.has = true;
-            that.courseInfo.score = rs.result;
-            let event = {
-              key: "ScoreCourse",//后台的事件key  发布文章且审核通过
-              title: "完成课程评分",//事件的标题
-              parameters:"",//用户自定义参数 name:value,name:value
-              content: "给课程评分",//事件的内容
-              objId: this.courseInfo.id,//关联的id
-              objType: 1,//关联的类型
-              objInfo: this.courseInfo.name,
-              aid: this.userInfo.aid, //当前登录人的id
-              aname: this.userInfo.name,//当前人的姓名
-              status: 1 //状态，直接写1
-            }
-            this.$store.dispatch("userTrigger", event);
-
+          // }
+        } else if (r.contentType == 52) {
+          this.isAppendTime = false;
+          if (r.content.startsWith('\{')) {
+            this.conLink = JSON.parse(r.content);
           } else {
-            this.$message.error('打分处理失败，请稍后再试');
+            this.conLink.url = r.content;
+            this.conLink.openType = 1;
+          }
+          if (this.conLink.openType == 2) {
+            //直接设置完成状态
+            this.widthOpen(this.conLink.url);
+          }
+          //this.conLink=
+        } else if (r.contentType == 61) {
+          // 考试
+        } else if (r.contentType == 60) {
+          // 作业
+        } else if (r.contentType == 62) {
+          // 评估
+          //评估不需要查找，因为内容就是content中
+          console.log('评估处理');
+        }
+        if (this.contentData.status < 2) {
+          this.contentData.status = 2; //进行中
+        }
+        if (this.contentData.contentType > 20) { //非视频类的
+          this.isAppendTime = true;
+          this.appendStudyTime();
+          this.handleTimeout = setTimeout(function() {
+            $this.saveStudyInfo();
+          }, 5000); //5秒后记录学习完成
+        }
+
+      },
+      // handleChange(val) {
+      //   console.log(val);
+      // },
+      loadScorePraiseAndTrample() {
+        //加载是否请过分
+        apiCourseGrade.has(this.courseId).then(rs => {
+          if (rs.status == 200 && rs.result) {
+            this.scoreInfo.has = true;
           }
         });
-      }
-    },
-    praiseContent() {
-      if (this.isTrample) {
-        this.$message.error('您已踩过了，不能再赞了');
-        return;
-      }
-       if(this.interactRuning){
-				return;
-			}
-			this.interactRuning=true;
-      let postData = {
-        objType: 1,
-        objId: this.courseId,
-        title: this.courseInfo.name
-      };
-      if (this.isPraise) {
-        apiPraises.remove(1, this.courseInfo.id).then(res => {
-          this.interactRuning=false;
-          if (res.status == 200) {
-            this.$message.info('已取消点赞');
-            this.isPraise = false;
-            this.courseInfo.praises--;
-          } else {
-            this.$message.error('取消点赞失败,请稍后再试');
-          }
-        });
-      } else {
-        apiPraises.save(postData).then(rs => {
-          this.interactRuning=false;
-          if (rs.status == 200) {
-            this.$message.success('点赞成功');
+        apiPraises.has(1, this.courseId).then(rs => {
+          if (rs.status == 200 && rs.result) {
             this.isPraise = true;
-            this.courseInfo.praises++;
-          } else {
-            this.$message.error('点赞失败,请稍后再试');
           }
         });
-      }
-    },
-    treadContent() {
-      if (this.isPraise) {
-        this.$message.error('您已赞过了，不能再踩了');
-        return;
-      }
-       if(this.interactRuning){
-				return;
-			}
-			this.interactRuning=true;
-      if (this.isTrample) {
-        apiTrample.remove(this.courseInfo.id).then(rs => {
-          this.interactRuning=false;
-          if (rs.status == 200) {
-            this.$message.info('已取消踩');
-            this.isTrample = false;
-            this.courseInfo.trampleCount--;
-          } else {
-            this.$message.error('取消失败,请稍后再试');
-          }
-        });
-      } else {
-        apiTrample.trample(this.courseInfo.id).then(rs => {
-          this.interactRuning=false;
-          if (rs.status == 200) {
-            this.$message.success('已踩');
+        apiTrample.has(this.courseId).then(rs => {
+          if (rs.status == 200 && rs.result) {
             this.isTrample = true;
-            this.courseInfo.trampleCount++;
-          } else {
-            this.$message.error('踩失败,请稍后再试');
           }
         });
-      }
-    },
-    statusToContent(status) {
-      let data = null;
-      switch (status) {
-        case 1: {
-          data = {
-            text: '未开始',
-            class: 'catalog-cell-state1'
-          };
-          break;
+      },
+      addScore() {
+        let that = this;
+        let postData = {
+          courseId: this.courseInfo.id,
+          studyId: this.studyId,
+          score: this.scoreInfo.score
+        };
+        if (this.scoreInfo.score > 0) {
+          apiCourseGrade.grade(postData).then(rs => {
+            if (rs.status == 200) {
+              this.$message.success('打分成功，谢谢您的打分');
+              that.scoreInfo.has = true;
+              that.courseInfo.score = rs.result;
+              let event = {
+                key: "ScoreCourse", //后台的事件key  发布文章且审核通过
+                title: "完成课程评分", //事件的标题
+                parameters: "", //用户自定义参数 name:value,name:value
+                content: "给课程评分", //事件的内容
+                objId: this.courseInfo.id, //关联的id
+                objType: 1, //关联的类型
+                objInfo: this.courseInfo.name,
+                aid: this.userInfo.aid, //当前登录人的id
+                aname: this.userInfo.name, //当前人的姓名
+                status: 1 //状态，直接写1
+              }
+              this.$store.dispatch("userTrigger", event);
+
+            } else {
+              this.$message.error('打分处理失败，请稍后再试');
+            }
+          });
         }
-        case 2: {
-          data = {
-            text: '进行中',
-            class: 'catalog-cell-state2'
-          };
-          break;
+      },
+      praiseContent() {
+        if(this.isTrample) {
+          this.$message.error('您已踩过了，不能再赞了');
+          return;
         }
-        case 9: {
-          data = {
-            text: '已完成',
-            class: 'catalog-cell-state9'
-          };
-          break;
+        if(this.interactRuning) {
+          return;
         }
-        default:
-          {
+        this.interactRuning = true;
+        let postData = {
+          objType: 1,
+          objId: this.courseId,
+          title: this.courseInfo.name
+        };
+        if (this.isPraise) {
+          apiPraises.remove(1, this.courseInfo.id).then(res => {
+            this.interactRuning = false;
+            if (res.status == 200) {
+              this.$message.info('已取消点赞');
+              this.isPraise = false;
+              this.courseInfo.praises--;
+            } else {
+              this.$message.error('取消点赞失败,请稍后再试');
+            }
+          });
+        } else {
+          apiPraises.save(postData).then(rs => {
+            this.interactRuning = false;
+            if (rs.status == 200) {
+              this.$message.success('点赞成功');
+              this.isPraise = true;
+              this.courseInfo.praises++;
+            } else {
+              this.$message.error('点赞失败,请稍后再试');
+            }
+          });
+        }
+      },
+      treadContent() {
+        if (this.isPraise) {
+          this.$message.error('您已赞过了，不能再踩了');
+          return;
+        }
+        if (this.interactRuning) {
+          return;
+        }
+        this.interactRuning = true;
+        if (this.isTrample) {
+          apiTrample.remove(this.courseInfo.id).then(rs => {
+            this.interactRuning = false;
+            if (rs.status == 200) {
+              this.$message.info('已取消踩');
+              this.isTrample = false;
+              this.courseInfo.trampleCount--;
+            } else {
+              this.$message.error('取消失败,请稍后再试');
+            }
+          });
+        } else {
+          apiTrample.trample(this.courseInfo.id).then(rs => {
+            this.interactRuning = false;
+            if (rs.status == 200) {
+              this.$message.success('已踩');
+              this.isTrample = true;
+              this.courseInfo.trampleCount++;
+            } else {
+              this.$message.error('踩失败,请稍后再试');
+            }
+          });
+        }
+      },
+      statusToContent(status) {
+        let data = null;
+        switch (status) {
+          case 1: {
+            data = {
+              text: '未开始',
+              class: 'catalog-cell-state1'
+            };
+            break;
+          }
+          case 2: {
+            data = {
+              text: '进行中',
+              class: 'catalog-cell-state2'
+            };
+            break;
+          }
+          case 9: {
+            data = {
+              text: '已完成',
+              class: 'catalog-cell-state9'
+            };
+            break;
+          }
+          default: {
             data = {
               text: '未开始',
               class: 'catalog-cell-state1'
             };
           }
           break;
-      }
-      return data;
-    },
-    loadAuthorInfo(list, ids) {
-      //加载作者信息，头像，机构信息
-      if (ids.length == 0) {
-        return;
-      }
-      apiUser.getByIds(ids).then(res => {
-        if (res.status == 200) {
-          list.forEach((item, index) => {
-            res.result.some(author => {
-              if (author.aid == item.teacherId) {
-                item.authorInfo = author;
-                return true;
-              } else {
-                return false;
-              }
+        }
+        return data;
+      },
+      loadAuthorInfo(list, ids) {
+        //加载作者信息，头像，机构信息
+        if (ids.length == 0) {
+          return;
+        }
+        apiUser.getByIds(ids).then(res => {
+          if (res.status == 200) {
+            list.forEach((item, index) => {
+              res.result.some(author => {
+                if (author.aid == item.teacherId) {
+                  item.authorInfo = author;
+                  return true;
+                } else {
+                  return false;
+                }
+              });
             });
-          });
-        } else {
-          //console.log('加载课程信息失败:'+res.error);
-          //this.$message.error(res.message);
-        }
-      });
-    },
-       ctabChange(e) {
-      //当前已经不再使用
-      //console.log(e);
-    },
+          } else {
+            //console.log('加载课程信息失败:'+res.error);
+            //this.$message.error(res.message);
+          }
+        });
+      },
+      ctabChange(e) {
+        //当前已经不再使用
+        //console.log(e);
+      },
       onPlayerPause() {
-      //console.log("暂停");
-    },
-    onPlayerEnded() {
-      this.playerBoxShow = true;
-      if(this.contentData.status<9){
-        this.finishStudyItem();
-      }
-    },
-    onPlayerPlaying(itme) {
-      this.isAppendTime=false;
-      this.appendStartTime=null;
-      this.intTimeNote = parseInt(itme);
-      //console.log("当前播放"+itme);
-      //console.log("当前播放11"+itme);
-      if (this.contentData.contentType && this.contentData.contentType == 10){
-        let intTime = parseInt(itme);
-        //判断是否完成
-        let completeType=this.curriculumData.completeSetup;
-        let completeSecond=this.curriculumData.second;
-        if(!completeSecond || completeType==0){
-          completeSecond=5;//如果没有就采用默认的时间了
+        //console.log("暂停");
+      },
+      onPlayerEnded() {
+        this.playerBoxShow = true;
+        if (this.contentData.status < 9) {
+          this.finishStudyItem();
         }
-        if(this.contentData.status<9){ //因为1按进度，2按时长都是计算时间，所以这里直接大于0处理
-            if(completeType==1){
-              let finishPercent=this.curriculumData.setupTage;
-              let videDuration=this.contentData.duration;
-              let percent =intTime*100/videDuration;
-              if(percent>=finishPercent){
-                  this.finishStudyItem();
+      },
+      onPlayerPlaying(itme) {
+        this.isAppendTime = false;
+        this.appendStartTime = null;
+        this.intTimeNote = parseInt(itme);
+        //console.log("当前播放"+itme);
+        //console.log("当前播放11"+itme);
+        if (this.contentData.contentType && this.contentData.contentType == 10) {
+          let intTime = parseInt(itme);
+          //判断是否完成
+          let completeType = this.curriculumData.completeSetup;
+          let completeSecond = this.curriculumData.second;
+          if (!completeSecond || completeType == 0) {
+            completeSecond = 5; //如果没有就采用默认的时间了
+          }
+          if (this.contentData.status < 9) { //因为1按进度，2按时长都是计算时间，所以这里直接大于0处理
+            if (completeType == 1) {
+              let finishPercent = this.curriculumData.setupTage;
+              let videDuration = this.contentData.duration;
+              let percent = intTime * 100 / videDuration;
+              if (percent >= finishPercent) {
+                this.finishStudyItem();
               }
-            }else{
-              if(intTime>=completeSecond){
-                 this.finishStudyItem();
+            } else {
+              if (intTime >= completeSecond) {
+                this.finishStudyItem();
               }
             }
+          }
+          //下面是每隔10秒记录一下次
+          let saveTime = Math.floor(intTime % 10);
+          if (intTime > 10 && intTime != this.contentData.lastStudyTime && saveTime == 0 && this.contentData
+            .studyItemId != '') {
+            this.contentData.lastStudyTime = intTime;
+            let postData = {
+              itemId: this.contentData.studyItemId,
+              videoTime: intTime
+            };
+            //console.log('记录播放时间')
+            apiStudy.studyVideoTime(postData).then(rs => {
+              if (rs.status != 200) {
+                console.log('记录播放时间错误');
+              }
+            });
+          }
+        }
+      },
+      audioPlaying(item, currentTime) {
+        //console.log("当前播放"+item);
+        let intTime = parseInt(currentTime);
+        //判断是否完成
+        let completeType = this.curriculumData.completeSetup;
+        let completeSecond = this.curriculumData.second;
+        if (!completeSecond || completeType == 0) {
+          completeSecond = 5; //如果没有就采用默认的时间了
+        }
+        if (this.contentData.status < 9) { //因为1按进度，2按时长都是计算时间，所以这里直接大于0处理
+          if (completeType == 1) {
+            let finishPercent = this.curriculumData.setupTage;
+            let videDuration = this.contentData.duration;
+            let percent = intTime * 100 / videDuration;
+            if (percent >= finishPercent) {
+              this.finishStudyItem();
+            }
+          } else {
+            if (intTime >= completeSecond) {
+              this.finishStudyItem();
+            }
+          }
         }
         //下面是每隔10秒记录一下次
         let saveTime = Math.floor(intTime % 10);
-        if (intTime > 10 && intTime!=this.contentData.lastStudyTime && saveTime == 0 && this.contentData.studyItemId != '') {
-          this.contentData.lastStudyTime=intTime;
+        if (intTime > 10 && intTime != this.contentData.lastStudyTime && saveTime == 0 && this.contentData
+          .studyItemId) {
+          this.contentData.lastStudyTime = intTime;
           let postData = {
             itemId: this.contentData.studyItemId,
             videoTime: intTime
@@ -702,496 +805,538 @@ export default {
             }
           });
         }
-      }
-    },
-    audioPlaying(item,currentTime) {
-      //console.log("当前播放"+item);
-      let intTime = parseInt(currentTime);
-      //判断是否完成
-      let completeType=this.curriculumData.completeSetup;
-      let completeSecond=this.curriculumData.second;
-      if(!completeSecond || completeType==0){
-        completeSecond=5;//如果没有就采用默认的时间了
-      }
-      if(this.contentData.status<9){ //因为1按进度，2按时长都是计算时间，所以这里直接大于0处理
-          if(completeType==1){
-            let finishPercent=this.curriculumData.setupTage;
-            let videDuration=this.contentData.duration;
-            let percent =intTime*100/videDuration;
-            if(percent>=finishPercent){
-                this.finishStudyItem();
-            }
-          }else{
-            if(intTime>=completeSecond){
-               this.finishStudyItem();
-            }
-          }
-      }
-      //下面是每隔10秒记录一下次
-      let saveTime = Math.floor(intTime % 10);
-      if (intTime > 10 && intTime!=this.contentData.lastStudyTime && saveTime == 0 && this.contentData.studyItemId) {
-        this.contentData.lastStudyTime=intTime;
-        let postData = {
-          itemId: this.contentData.studyItemId,
-          videoTime: intTime
-        };
-        //console.log('记录播放时间')
-        apiStudy.studyVideoTime(postData).then(rs => {
-          if (rs.status != 200) {
-            console.log('记录播放时间错误');
-          }
-        });
-      }
-    },
-    audioPlay() {
-      //console.log("开始播放");
-      let $this=this;
-      // if(this.contentData.status!=9){
-      //   let completeType=this.curriculumData.completeSetup;
-      //   if(completeType==0){
-      //     //默认5秒后学习完成.
-      //     $this.handleTimeout= setTimeout(function() {$this.saveStudyInfo();}, 5000); //5秒后记录学习完成
-      //   }else{
-      //     //先记录进行中的学习内容
-      //     this.saveStudyItem();
-      //   }
-      // }
-    },
-    audioPause() {
-      //console.log("暂停");
-    },
-    audioEnd() {
-       //console.log("播放结束");
-      if(this.contentData.status<9){
-        this.finishStudyItem();
-      }
-    },
-    loadData() {
-      apiCoursePortal.detail(this.courseId,false).then(rs => {
-        if (rs.status == 200) {
-          //设置必须的字段
-          if(rs.result.course.type == 20) {
-            rs.result.sections.forEach(sec => {
-            sec.status = 0; //加入状态表未开始
-            rs.result.contents.forEach(c => {
-              c.status = 0; //初始化状态 ，未开始
-              c.studyItemId = ''; //初始化字段，学习条目id
-              c.lastStudyTime = 0; //初始化上次一学习的时间，作用于视频插放
-            });
-          });
-          this.sectionList = rs.result.sections;
-          }
-          this.courseInfo = rs.result.course;
-          this.teachers = rs.result.teachers;
-          if (rs.result.teachers && rs.result.teachers.length > 0) {
-            let userIds = [];
-            let ctoUsers = [];
-            rs.result.teachers.forEach(item => {
-              item.authorInfo = { aid: '', name: '', orgInfo: '', avatar: '', code: '',sex:null, };
-              userIds.push(item.teacherId);
-              ctoUsers.push({ aid: item.teacherId, name: item.teacherName });
-            });
-            this.toUsers = ctoUsers;
-            this.loadAuthorInfo(rs.result.teachers, userIds);
-          }
-          this.contentList = rs.result.contents;
-          this.totalContent = rs.result.contents.length;
-          //加载学习的数据
-          this.loadStudyData();
-        } else {
-          this.$message.error(rs.message);
+      },
+      audioPlay() {
+        //console.log("开始播放");
+        let $this = this;
+      },
+      audioPause() {
+        //console.log("暂停");
+      },
+      audioEnd() {
+        //console.log("播放结束");
+        if (this.contentData.status < 9) {
+          this.finishStudyItem();
         }
-      });
-    },
-    loadStudyData() {
-      let $this = this;
-      apiStudy.studyInfo(this.courseId).then(res => {
-        if (res.status == 200) {
-          if (res.result.signup){
-            this.loadScorePraiseAndTrample();
-            this.studyId = res.result.studyId;
-            //对已学习的内容进行比对，重要的字段， 学习内容id，在后缀的
-            let playIndex = -1;
-            this.contentList.forEach((con, conIdx) => {
-              res.result.contents.forEach((scon, sconIdx) => {
-                if (scon.contentId == con.id) {
-                  //定位显示的内容
-                  if ($this.initContentId != '' && $this.initContentId == scon.contentId) {
-                    //定位当前学习的内容，是上一次学习的内容
-                    playIndex = conIdx;
-                  } else {
-                    if (sconIdx == 0 && con.contentType < 52){
-                      playIndex = conIdx;
-                    }
-                  }
-                  //console.log(scon.contentId,con.id);
-                  con.lastStudyTime = scon.lastStudyTime;
-                  //以下判断是为了兼容之前的问题，学习状态
-                  if(scon.status){
-                    con.status = scon.status;
-                  }else{
-                    con.status = 9;
-                  }
-                  con.studyItemId = scon.id; //这个就是学习内容（条目）的id
-                  //console.log(scon.id,"scon.id");
-                  //console.log(con,"scon.id");
+      },
+      loadData() {
+        apiCoursePortal.detail(this.courseId, false).then(rs => {
+          if (rs.status == 200) {
+            //设置必须的字段
+            if (rs.result.course.type == 20) { //有目录课程
+              rs.result.sections.forEach(sec => {
+                sec.status = 0; //加入状态表未开始
+                rs.result.contents.forEach(c => {
+                  c.status = 0; //初始化状态 ，未开始
+                  c.studyItemId = ''; //初始化字段，学习条目id
+                  c.lastStudyTime = 0; //初始化上次一学习的时间，作用于视频插放
+                });
+              });
+              this.sectionList = rs.result.sections;
+            }else if(rs.result.course.type==10){ //无目录课程
+              rs.result.contents.forEach(c => {
+                c.status = 0; //
+                c.studyItemId = '';
+                c.lastStudyTime = 0;
+                if(c.sortIndex==2){
+                  c.contentName='作业';
+                }else if(c.sortIndex==3){
+                  c.contentName='考试';
+                }else if(c.sortIndex==4){
+                  c.contentName='评估';
                 }
               });
-            });
-            
-            if(this.courseInfo.type == 10) {
-              this.showRes(this.contentList[0]);
-            } else {
-              //如果没有，就定位第一项内容
-              if (playIndex === -1) {
-                // this.showRes(this.contentList[0]);
-                this.showRes(this.catalogTree[0].children[0])
-              } else {
-                this.showRes(this.contentList[playIndex]);
-              }
             }
-
+            this.courseInfo = rs.result.course;
+            this.teachers = rs.result.teachers;
+            if (rs.result.teachers && rs.result.teachers.length > 0) {
+              let userIds = [];
+              let ctoUsers = [];
+              rs.result.teachers.forEach(item => {
+                item.authorInfo = {
+                  aid: '',
+                  name: '',
+                  orgInfo: '',
+                  avatar: '',
+                  code: '',
+                  sex: null,
+                  sign:''
+                };
+                userIds.push(item.teacherId);
+                ctoUsers.push({
+                  aid: item.teacherId,
+                  name: item.teacherName
+                });
+              });
+              this.toUsers = ctoUsers;
+              this.loadAuthorInfo(rs.result.teachers, userIds);
+            }
+            this.contentList = rs.result.contents;
+            //处理内容的名称
+            this.totalContent = rs.result.contents.length;
+            //加载学习的数据
+            this.loadStudyData();
           } else {
-            this.$message.error('您还未报名');
-            // if (this.courseInfo.type == 10) {
-            //   location.href = this.webBaseUrl + '/course/micro?id=' + this.courseId;
-            // } else {
-              location.href = this.webBaseUrl + '/course/detail?id=' + this.courseId;
-            // }
+            this.$message.error(rs.message);
           }
-        } else {
-          this.$message.error(res.message);
-        }
-      });
-    },
-    saveStudyInfo() {
-      //记录课件学习信息
-      if (this.contentData.contentType >= 60) {
-        //只有在课件页面停留超过5秒才会记录
-        return;
-      }
-      if (this.contentData.status == 9) {
-        //已学习完的，不用再添加
-        return;
-      }
-      let params = {
-        studyId: this.studyId, //学习id,
-        courseId: this.courseId, //课程id,
-        contentId: this.contentData.id, //内容id,
-        contentType:this.contentData.contentType,
-        contentName: this.contentData.contentName, //内容名称
-        progress: 100,
-        status:9,
-        contentTotal: this.totalContent
-      };
-      apiStudy.studyContent(params).then(res => {
-        if (res.status == 200) {
-          this.contentData.status = 9; //完成
-          this.contentData.studyItemId = res.result; //学习记录id
-        } else {
-          console.log('记录学习失败:' + res.message + '，' + res.error);
-        }
-      });
-    },
-    saveStudyDuration(){ //保存本地存储的学习时长
-       let duration=studyUtil.getStudyDuration();
-       if(duration>0){
-           let postData = {
-             id:this.appentId,
-             studyId: this.studyId,
-             courseId: this.courseInfo.id,
-             contentId: this.contentData.id,
-             studyInfo:
-               this.courseInfo.name +
-               "-" +
-               this.contentData.contentName,
-             duration: duration
-           };
-           apiStudy.appendStudyTime(postData).then(rs => {
-             if (rs.status == 200){
-               this.appentId=rs.result;
-               studyUtil.clearStudyDuration();//清除本地存储
-             } else {
-               console.log(rs.message);
-             }
-           });
-       }
-    },
-    appendStudyTime(flag) {
-      if(this.studyId==''){
-        return;
-      }
-      if(!this.contentData.id){
-        return;
-      }
-      if(!this.isAppendTime){
-        this.appendStartTime =null;
-        return;
-      }
+        });
+      },
+      loadStudyData() {
+        let $this = this;
+        apiStudy.studyInfo(this.courseId).then(res => {
+          if (res.status == 200) {
+            if (res.result.signup) {
+              this.loadScorePraiseAndTrample();
+              this.studyId = res.result.studyId;
+              //对已学习的内容进行比对，重要的字段， 学习内容id，在后缀的
+              let playIndex = -1;
+              this.contentList.forEach((con, conIdx) => {
+                res.result.contents.forEach((scon, sconIdx) => {
+                  if (scon.contentId == con.id) {
+                    //定位显示的内容
+                    if ($this.initContentId != '' && $this.initContentId == scon.contentId) {
+                      //定位当前学习的内容，是上一次学习的内容
+                      playIndex = conIdx;
+                    } else {
+                      if (sconIdx == 0 && con.contentType < 52) {
+                        playIndex = conIdx;
+                      }
+                    }
+                    //console.log(scon.contentId,con.id);
+                    con.lastStudyTime = scon.lastStudyTime;
+                    //以下判断是为了兼容之前的问题，学习状态
+                    if (scon.status) {
+                      con.status = scon.status;
+                    } else {
+                      con.status = 9;
+                    }
+                    con.studyItemId = scon.id; //这个就是学习内容（条目）的id
+                    //console.log(scon.id,"scon.id");
+                    //console.log(con,"scon.id");
+                  }
+                });
+              });
 
-      if(this.appendHandle!=null){
-        window.clearTimeout(this.appendHandle);
-      }
-      //首先从本地读取
-      let duration=studyUtil.getStudyDuration();
-      //追加学习时间
-      let $this = this;
-      if (this.appendStartTime == null) {
-        this.appendStartTime = new Date();
-        this.appendHandle=setTimeout(function() {$this.appendStudyTime();}, $this.appentInterval);
-        if(duration>0 && flag){
-          this.saveStudyDuration();
+              if (this.courseInfo.type == 10) {
+                this.showRes(this.contentList[0]);
+              } else {
+                //如果没有，就定位第一项内容
+                if (playIndex === -1) {
+                  // this.showRes(this.contentList[0]);
+                  this.showRes(this.catalogTree[0].children[0])
+                } else {
+                  this.showRes(this.contentList[playIndex]);
+                }
+              }
+
+            } else {
+              this.$message.error('您还未报名');
+              // if (this.courseInfo.type == 10) {
+              //   location.href = this.webBaseUrl + '/course/micro?id=' + this.courseId;
+              // } else {
+              location.href = this.webBaseUrl + '/course/detail?id=' + this.courseId;
+              // }
+            }
+          } else {
+            this.$message.error(res.message);
+          }
+        });
+      },
+      saveStudyInfo() {
+        //记录课件学习信息
+        if (this.contentData.contentType >= 60) {
+          //只有在课件页面停留超过5秒才会记录
+          return;
         }
-        return;
-      }
-      let now = new Date();
-      let m = now.getTime() - this.appendStartTime.getTime(); //相差的毫秒数
-      let sen = parseInt(m / 1000); //计算秒数
-      duration=duration+sen;
-      if(flag) {
-        if(duration>0){
+        if (this.contentData.status == 9) {
+          //已学习完的，不用再添加
+          return;
+        }
+        let params = {
+          studyId: this.studyId, //学习id,
+          courseId: this.courseId, //课程id,
+          contentId: this.contentData.id, //内容id,
+          contentType: this.contentData.contentType,
+          contentName: this.contentData.contentName, //内容名称
+          progress: 100,
+          status: 9,
+          contentTotal: this.totalContent
+        };
+        apiStudy.studyContent(params).then(res => {
+          if (res.status == 200) {
+            this.contentData.status = 9; //完成
+            this.contentData.studyItemId = res.result; //学习记录id
+          } else {
+            console.log('记录学习失败:' + res.message + '，' + res.error);
+          }
+        });
+      },
+      saveStudyDuration() { //保存本地存储的学习时长
+        let duration = studyUtil.getStudyDuration();
+        if (duration > 0) {
+          let postData = {
+            id: this.appentId,
+            studyId: this.studyId,
+            courseId: this.courseInfo.id,
+            contentId: this.contentData.id,
+            studyInfo: this.courseInfo.name +
+              "-" +
+              this.contentData.contentName,
+            duration: duration
+          };
+          apiStudy.appendStudyTime(postData).then(rs => {
+            if (rs.status == 200) {
+              this.appentId = rs.result;
+              studyUtil.clearStudyDuration(); //清除本地存储
+            } else {
+              console.log(rs.message);
+            }
+          });
+        }
+      },
+      appendStudyTime(flag) {
+        if (this.studyId == '') {
+          return;
+        }
+        if (!this.contentData.id) {
+          return;
+        }
+        if (!this.isAppendTime) {
+          this.appendStartTime = null;
+          return;
+        }
+
+        if (this.appendHandle != null) {
+          window.clearTimeout(this.appendHandle);
+        }
+        //首先从本地读取
+        let duration = studyUtil.getStudyDuration();
+        //追加学习时间
+        let $this = this;
+        if (this.appendStartTime == null) {
+          this.appendStartTime = new Date();
+          this.appendHandle = setTimeout(function() {
+            $this.appendStudyTime();
+          }, $this.appentInterval);
+          if (duration > 0 && flag) {
+            this.saveStudyDuration();
+          }
+          return;
+        }
+        let now = new Date();
+        let m = now.getTime() - this.appendStartTime.getTime(); //相差的毫秒数
+        let sen = parseInt(m / 1000); //计算秒数
+        duration = duration + sen;
+        if (flag) {
+          if (duration > 0) {
             let postData = {
-              id:this.appentId,
+              id: this.appentId,
               studyId: this.studyId,
               courseId: this.courseInfo.id,
               contentId: this.contentData.id,
-              studyInfo:
-                this.courseInfo.name +
+              studyInfo: this.courseInfo.name +
                 "-" +
                 this.contentData.contentName,
               duration: duration
             };
             apiStudy.appendStudyTime(postData).then(rs => {
-              if (rs.status == 200){
-                $this.appentId=rs.result;
+              if (rs.status == 200) {
+                $this.appentId = rs.result;
                 $this.appendStartTime = new Date(); //重置开始时间
-                studyUtil.clearStudyDuration();//清除本地存储
+                studyUtil.clearStudyDuration(); //清除本地存储
                 //this.appendHandle=setTimeout(function() {$this.appendStudyTime();}, $this.appentInterval);
               } else {
                 console.log(rs.message);
               }
             });
+          }
+        } else {
+          $this.appendStartTime = new Date(); //重置开始时间
+          studyUtil.setStudyDuration(duration); //添加到本地存储中
         }
-      } else {
-        $this.appendStartTime = new Date(); //重置开始时间
-        studyUtil.setStudyDuration(duration);//添加到本地存储中
-      }
-      this.appendHandle=setTimeout(function() {$this.appendStudyTime();},$this.appentInterval);
-    },
+        this.appendHandle = setTimeout(function() {
+          $this.appendStudyTime();
+        }, $this.appentInterval);
+      },
       onPlayerPlay() {
-      //console.log("开始播放");
-      this.playerBoxShow = false;
-      let $this=this;
-      //console.log(this.contentData.status,'this.contentData.status');
-      // if(this.contentData.status<9){
-      //   let completeType=this.curriculumData.completeSetup;
-      //   //console.log(completeType,'completeType');
-      //   if(completeType==0){
-      //     //默认5秒后学习完成.
-      //     $this.handleTimeout= setTimeout(function() {$this.saveStudyInfo();}, 5000); //5秒后记录学习完成
-      //   }else{
-      //     //先记录进行中的学习内容
-      //     this.saveStudyItem();
-      //   }
-      // }
-    },
-       onFullscreen(full){
-      let divId='videowatermark';
-      var div = document.getElementById('myVideoPlayer')
-      if(full){
-      	var div3 = document.createElement("div");
-        div3.id =divId;
-        div3.setAttribute("class", "fullmark");
-      	div3.innerHTML='';
-        //从父组件传过来的水印内容
-        //div3.innerText =this.userInfo.name+this.userInfo.code;
-      	for(var i=0;i<8;i++){
-      		div3.innerHTML+='<div style="color:#ffffff;width: 40%;height: 155px;padding-left:60px;padding-top:50px; display: flex;justify-content: center; transform: rotate(-36deg);font-size:20px;">'+this.userInfo.name+this.userInfo.loginName+'</div>';
-      	}
-        div3.style.cssText = "position:absolute;pointer-events: none; width: 100%;height: 100%;top:0;left:0;bottom: 0;right: 0; display: flex;justify-content: center;flex-wrap: wrap;overflow: hidden; opacity:0.3;padding-top:10px";
-      	div.appendChild(div3);
-      }else{
-      	var markDiv=div.querySelector("#"+divId);
-      	if(markDiv){
-      		div.removeChild(markDiv);
-      	}
-      }
-    },
-       finishStudyItem(){ //设置完成学习的内容,针对于音视频的内容
-        if(!this.contentData.studyItemId){
+        //console.log("开始播放");
+        this.playerBoxShow = false;
+        let $this = this;
+        //console.log(this.contentData.status,'this.contentData.status');
+        // if(this.contentData.status<9){
+        //   let completeType=this.curriculumData.completeSetup;
+        //   //console.log(completeType,'completeType');
+        //   if(completeType==0){
+        //     //默认5秒后学习完成.
+        //     $this.handleTimeout= setTimeout(function() {$this.saveStudyInfo();}, 5000); //5秒后记录学习完成
+        //   }else{
+        //     //先记录进行中的学习内容
+        //     this.saveStudyItem();
+        //   }
+        // }
+      },
+      onFullscreen(full) {
+        let divId = 'videowatermark';
+        var div = document.getElementById('myVideoPlayer')
+        if (full) {
+          var div3 = document.createElement("div");
+          div3.id = divId;
+          div3.setAttribute("class", "fullmark");
+          div3.innerHTML = '';
+          //从父组件传过来的水印内容
+          //div3.innerText =this.userInfo.name+this.userInfo.code;
+          for (var i = 0; i < 8; i++) {
+            div3.innerHTML +=
+              '<div style="color:#ffffff;width: 40%;height: 155px;padding-left:60px;padding-top:50px; display: flex;justify-content: center; transform: rotate(-36deg);font-size:20px;">' +
+              this.userInfo.name + this.userInfo.loginName + '</div>';
+          }
+          div3.style.cssText =
+            "position:absolute;pointer-events: none; width: 100%;height: 100%;top:0;left:0;bottom: 0;right: 0; display: flex;justify-content: center;flex-wrap: wrap;overflow: hidden; opacity:0.3;padding-top:10px";
+          div.appendChild(div3);
+        } else {
+          var markDiv = div.querySelector("#" + divId);
+          if (markDiv) {
+      	     div.removeChild(markDiv);
+          }
+        }
+      },
+      finishStudyItem() { //设置完成学习的内容,针对于音视频的内容
+        if (!this.contentData.studyItemId) {
           //这种可能没有，不过这里也是为了万中那个1
           this.saveStudyInfo();
-        }else{
-          let params={
-            itemId:this.contentData.studyItemId,
-            studyId:this.studyId,
-            courseId:this.courseId,
-            cnum:this.totalContent
+        } else {
+          let params = {
+            itemId: this.contentData.studyItemId,
+            studyId: this.studyId,
+            courseId: this.courseId,
+            cnum: this.totalContent
           }
-          apiVideoStudy.finishStudyItem(params).then(res=>{
-              if(res.status == 200){
-                this.contentData.status = 9;
-                this.contentData.progress = 100;
-              }else{
-                console.log("记录完成学习失败:" + res.message + "，" + res.error);
-              }
+          apiVideoStudy.finishStudyItem(params).then(res => {
+            if (res.status == 200) {
+              this.contentData.status = 9;
+              this.contentData.progress = 100;
+            } else {
+              console.log("记录完成学习失败:" + res.message + "，" + res.error);
+            }
           });
         }
-    },
-   
-      saveStudyItem(){ //先保存学习的内容,针对于音视频的内容
-      if(this.contentData.studyItemId) {
-        return;//已经有记录的，不需要再保存了
-      }
-      let params = {
-        studyId: this.studyId, //学习id,
-        courseId: this.courseId, //课程id,
-        contentId: this.contentData.id, //内容id,
-        contentType:this.contentData.contentType, //内容id,
-        contentName: this.contentData.contentName, //内容名称
-        progress: 0,
-        lastStudyTime:0,
-        status:2,
-        studyDuration:0,
-        contentTotal: this.totalContent
-      };
-      apiVideoStudy.saveStudyItem(params).then(res=>{
-          if(res.status == 200){
-            this.contentData.studyItemId=res.result.id;
-            this.contentData.status = 2;//进行中状态
-          }else{
+      },
+
+      saveStudyItem() { //先保存学习的内容,针对于音视频的内容
+        if (this.contentData.studyItemId) {
+          return; //已经有记录的，不需要再保存了
+        }
+        let params = {
+          studyId: this.studyId, //学习id,
+          courseId: this.courseId, //课程id,
+          contentId: this.contentData.id, //内容id,
+          contentType: this.contentData.contentType, //内容id,
+          contentName: this.contentData.contentName, //内容名称
+          progress: 0,
+          lastStudyTime: 0,
+          status: 2,
+          studyDuration: 0,
+          contentTotal: this.totalContent
+        };
+        apiVideoStudy.saveStudyItem(params).then(res => {
+          if (res.status == 200) {
+            this.contentData.studyItemId = res.result.id;
+            this.contentData.status = 2; //进行中状态
+          } else {
             console.log("记录学习失败:" + res.message + "，" + res.error);
           }
-      });
+        });
+      },
+      formatTime(duration) {
+        let min = 0;
+        if (duration > 0) {
+          min = parseInt(duration / 60);
+        }
+        return min;
+      },
+      heartabone() {
+        this.tab = 1
+      },
+      heartabtwo() {
+        this.tab = 2
+      },
+      notetab1(num) {
+        this.notetab = num
+      },
     },
-      formatTime(duration){
-      let min=0;
-      if(duration>0){
-        min=parseInt(duration/60);
-      }
-      return min;
-    },
-      heartabone(){
-          this.tab = 1
-      },
-      heartabtwo(){
-          this.tab = 2
-      },
-       notetab1(num){
-          this.notetab = num
-      },
-  },
-}
+  }
 </script>
 
 <style lang="scss" scoped>
-.tearch-top{
-  margin-top: 10px;
-    width: 100%;
-    height: 15px;
-    img{
-        width: 100%;
+  //内容块样式定义
+  .course-content {
+    min-height: 745px;
+    margin: 20px 80px;
+    .course-playbox {
+      background-color: #fff;
+      min-height: 400px;
+      display: flex;
+      justify-content: space-between;
+      .course-player{ //内容播放区域
+        flex:1;
+        min-width: 700px;
+        width: 65%;
         height: 100%;
+        border: 1px solid #ffffff;
+        padding-right: 20px;
+        overflow: auto;
+      }
+      .course-control{ //内容控制区域
+         min-width: 400px;
+         width: 35%;
+      }
     }
-}
-.coures-note{
+    .course-infobox {
+      margin-top: 20px;
+      display: flex;
+      justify-content: space-between;
+      .course-info {
+        flex:1;
+        min-width: 700px;
+        width: 65%;
+        min-height: 710px;
+        box-sizing: border-box;
+        padding-right: 20px;
+      }
+      .course-teacher{
+        min-width: 400px;
+        width: 35%;
+      }
+    }
+  }
+
+  .control-tab {
+    margin: 35px 30px 10px 30px;
+
+    border-bottom: 1px solid #D8D8D8;
+    display: flex;
+    justify-content: space-around;
+    padding-bottom: 12px;
+    div {
+      color: #666666;
+      cursor: pointer;
+    }
+    .control-tab-active {
+      color: #333333;
+      font-weight: 600;
+    }
+  }
+
+  .course-info-tab {
+    display: flex;
+    padding-top: 30px;
+    margin-left: 47px;
+    div {
+      color: #333333;
+      font-size: 18px;
+      cursor: pointer;
+      margin-right: 50px;
+    }
+
+    .course-info-tab-active {
+      color: #333333;
+      font-weight: 600;
+      position: relative;
+      span {
+        display: inline-block;
+        width: 69px;
+        height: 4px;
+        background: #387DF7;
+        border-radius: 5px;
+        position: absolute;
+        left: 0;
+        top: 128%;
+      }
+
+    }
+
+  }
+
+  .course-info-row{
+    padding: 10px 0;
+    font-size: 18px;
+    color: #343434;
+    img{
+      width:18px
+    }
+    .course-info-text{
+      margin: 10px 0;
+      font-size: 14px;
+      text-indent: 2em;
+      color: #666666;
+      word-break: break-all;
+    }
+  }
+  //右侧老师部分头部及标题
+  .cteacher-top {
+    background-color: #fff;
+    margin-top: 0px;
+    .cteacher-top-bar{
+      width: 100%;
+      height: 15px;
+    }
+    .cteacher-top-title{
+      padding-left:30px;
+      padding-top:20px;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 50px;
+    }
+
+  }
+  //右侧老师部分 老师列表
+  .cteacher-list {
+    background-color: #fff;
+    padding: 36px;
+  }
+
+//以下是未整理的样式，上面的整理之后的样式
+  .coures-note {
     min-height: 500px;
     padding-left: 17px;
     padding-top: 10px;
-    .note-tole{
+
+    .note-tole {
       color: #333333;
       font-size: 18px;
       font-weight: 600;
     }
-    .note-info{
 
-    }
-}
-.coures-tearch{
-  margin-top: 24px;
-  margin-left: 20px;
-}
-.coure-tab{
-    display: flex;
+    .note-info {}
+  }
+
+  .player-box {
+    position: absolute;
+    // top: 62px;
+    // left: 184px;
     width: 300px;
-    padding-top: 30px;
-    margin-left: 47px;
-    div{
-        flex: 1;
-        color: #333333;
-        font-size: 18px;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    height: 187px;
+    background: rgba(74, 74, 74, .5);
+    border-radius: 33px;
+    text-align: center;
+    padding: 20px;
+    box-sizing: border-box;
+
+    .player-praise {
+      margin-top: 25px;
+      display: flex;
+      // justify-items: center;
+      justify-content: center;
     }
-    .coureactive{
-        color: #333333;
-        font-weight: 600;
-        position: relative;
-        span{
-            display: inline-block;
-            width: 69px;
-            height: 4px;
-            background: #387DF7;
-            border-radius: 5px;
-            position: absolute;
-            left: 0;
-            top: 128%;
-        }
 
+    .player-rate {
+      margin-top: 35px;
+    }
   }
 
-}
-.mltit{
-
-  // width: 70%;
-  // width: ;
-  word-break:break-all;
-  // line-height: 25px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-}
-.catalog-text{
-  width: 70%;
-  overflow: hidden;
-  word-break:break-all;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  height: 40px;
-}
-.player-box{
-  position: absolute;
-  // top: 62px;
-  // left: 184px;
-  width: 300px;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  height: 187px;
-  background: rgba(74, 74, 74,.5);
-  border-radius: 33px;
-  text-align: center;
-  padding: 20px;
-  box-sizing: border-box;
-  .player-praise{
-    margin-top: 25px;
-    display: flex;
-    // justify-items: center;
-    justify-content: center;
-  }
-  .player-rate{
-    margin-top: 35px;
-  }
-}
-.score {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  .el-rate {
-    display: inline-block;
-  }
   .score-text {
     font-size: 28px;
     color: #ffb30f;
@@ -1199,268 +1344,303 @@ export default {
     margin-left: 23px;
     // font-weight: 600;
   }
-  // margin-bottom: 19px;
-  .score-no {
-    color: #ffb30f;
-    padding: 5px 0;
-    background: #efefef;
-    border-radius: 20px;
-    width: 65px;
-    font-size: 12px;
-    font-weight: 600;
-    text-align: center;
-  }
-}
-.portal-content-title {
-  font-weight: 600;
-  padding: 10px;
-  font-size: 22px;
-  line-height: 40px;
-  color: #333333;
-  word-break:break-all;
-}
 
-.type-kuang {
-  color: #666666;
-  border: 1px solid #666666;
-}
-.type-click {
-  color: #ffb30f !important;
-  border: 1px solid #ffb30f !important;
-}
-::v-deep .el-rate__icon {
-  font-size: 22px;
-  margin-right: 6px;
-  color: #ff8e00;
-  transition: 0.3s;
-}
-.ref-score {
-  // background: #e4e4e4;
-  // width: 64px;
-  // height: 32px;
-  // border-radius: 17px;
-  // line-height: 32px;
-  // // opacity: 0.24;
-  // color: #000;
-  // font-size: 14px;
-  // border: none;
-}
-.icon-small {
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
-  vertical-align: middle;
-}
-.con-audio {
-  padding: 50px;
-  text-align: center;
-  .con-audio-title {
-    font-size: 16px;
-    font-weight: 700;
-  }
-  .con-audio-player {
-    padding: 20px 100px;
-  }
-}
-.hyper-link {
-  padding-left: 20px;
-  text-align: center;
-  padding-top: 100px;
-  .hyper-link-row {
-    padding: 20px;
-  }
-}
-.catalog-box {
-  background: #fff;
-  // padding: 15px 0px;
-  // box-shadow: 1px 1px 2px 2px #ededed;
-  .title {
-    font-size: 16px;
-    font-weight: 600;
-    color: #333333;
-    padding-left: 20px;
-  }
-}
-.collapse-title {
-  flex: 1 0 90%;
-  order: 1;
-}
-
-.el-collapse-item__header {
-  flex: 1 0 auto;
-  order: -1;
-}
-.course-interact {
-  height: 54px;
-  // padding-top: 10px;
-  // padding-right: 10px;
-  padding: 0 20px;
-  line-height: 54px;
-  background-color: #FFFFFF;
-  display: flex;
-  justify-content: space-between;
-  box-sizing: border-box;
-}
-.interact-btn {
-  margin-right: 10px;
-}
-.uc-badge {
-  margin-top: 10px;
-  margin-right: 40px;
-}
-.cres-list {
-  list-style-type: decimal;
-  margin: 0px;
-  li {
-    line-height: 30px;
-  }
-  .current {
-    color: #1ea0fa;
-  }
-}
-.uc-course {
-  display: flex;
-  justify-content: space-around;
-  border: 1px solid #f0f0f0;
-  padding: 10px;
-  .uc-course-img {
-    width: 200px;
-    img {
-      width: 200px;
-      border: 1px solid #f4f4f5;
-    }
-  }
-  .uc-course-info {
-    flex: 1;
-    line-height: 28px;
-    padding: 0px 10px;
-    .uc-course-name {
-      font-size: 18px;
-      font-weight: 700;
-    }
-    .uc-course-text {
-      color: #747474;
-    }
-  }
-  .uc-course-btns {
-    width: 150px;
-  }
-}
-
-.catalog-cell-state2 {
-  height: 24px;
-  width: 58px;
-  line-height: 20px;
-  border: 0px dotted #bed2f8;
-  padding: 3px 10px;
-  color: #ff8e00;
-  font-size: 12px;
-  border-radius: 6px;
-  margin-left: 2px;
-  background: #ffedd6;
-}
-.catalog-cell-state9 {
-  height: 24px;
-  width: 58px;
-  line-height: 20px;
-  border: 0px dotted #bed2f8;
-  padding: 3px 10px;
-  color: #3e7fff;
-  font-size: 12px;
-  border-radius: 6px;
-  margin-left: 2px;
-  background: #edf2fd;
-  // margin-left: 68%;
-  // background-color: #BED2F8;
-}
-.catalog-cell-state1 {
-  height: 24px;
-  width: 58px;
-  line-height: 20px;
-  border: 0px dotted #edf2fd;
-  border-radius: 6px;
-  padding: 3px 10px;
-  color: #ff3e3e;
-  font-size: 12px;
-  margin-left: 2px;
-  background: #fff0f0;
-}
-.catalog {
-  height: 500px;
-  max-width: 500px;
-  overflow: auto;
-  .catalog-row {
-    margin: 0px;
-    padding: 0px 10px 10px 10px;
-    .title-type {
-      width: 36px;
-      height: 24px;
-      padding: 2px 5px;
-      color: #666666;
-      border: 1px solid #666666;
-      margin-right: 8px;
-    }
-    ul {
-      padding: 0px;
-      margin: 0px;
-      li {
-        padding: 6px 0;
-      }
-    }
-    .catalog-cell {
-      line-height: 32px;
-      cursor: pointer;
-      list-style: none;
-      margin: 0px;
-      padding-left: 20px;
-      color: #5c5c5c;
-    }
-  }
-}
-.video-div {
-  position: absolute;
-  z-index: 999999999;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(101, 101, 101, 0.9);
-  .good {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 200px;
-    div {
-      line-height: 1;
-      margin: 0 15px;
-      .svg-icon {
-        width: 30px;
-        height: 30px;
-      }
-    }
-    div:nth-of-type(2) {
-      .svg-icon {
-        transform: scaleX(-1);
-        transform: rotate(180deg);
-      }
-    }
-    // margin-bottom: 50px;
-    // line-height: 20px;
-    // .el-link{
-    //   font-size: 30px;
-    //   color: #70a5f4;
-    //   margin: 0 30px;
-    // }
-  }
   // .score {
   //   display: flex;
   //   justify-content: center;
   //   align-items: center;
-  //   padding-top: 20px
-  // }
-}
 
-::v-deep .el-tag {
+  //   .el-rate {
+  //     display: inline-block;
+  //   }
+  //   // margin-bottom: 19px;
+  //   .score-no {
+  //     color: #ffb30f;
+  //     padding: 5px 0;
+  //     background: #efefef;
+  //     border-radius: 20px;
+  //     width: 65px;
+  //     font-size: 12px;
+  //     font-weight: 600;
+  //     text-align: center;
+  //   }
+  // }
+
+  .portal-content-title {
+    font-weight: 600;
+    padding: 10px;
+    font-size: 22px;
+    line-height: 40px;
+    color: #333333;
+    word-break: break-all;
+  }
+
+  .type-kuang {
+    color: #666666;
+    border: 1px solid #666666;
+  }
+
+  .type-click {
+    color: #ffb30f !important;
+    border: 1px solid #ffb30f !important;
+  }
+
+  ::v-deep .el-rate__icon {
+    font-size: 22px;
+    margin-right: 6px;
+    color: #ff8e00;
+    transition: 0.3s;
+  }
+
+  .ref-score {
+    // background: #e4e4e4;
+    // width: 64px;
+    // height: 32px;
+    // border-radius: 17px;
+    // line-height: 32px;
+    // // opacity: 0.24;
+    // color: #000;
+    // font-size: 14px;
+    // border: none;
+  }
+
+  .icon-small {
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    vertical-align: middle;
+  }
+
+  .con-audio {
+    padding: 50px;
+    text-align: center;
+
+    .con-audio-title {
+      font-size: 16px;
+      font-weight: 700;
+    }
+
+    .con-audio-player {
+      padding: 20px 100px;
+    }
+  }
+
+  .hyper-link {
+    padding-left: 20px;
+    text-align: center;
+    padding-top: 100px;
+
+    .hyper-link-row {
+      padding: 20px;
+    }
+  }
+
+  .catalog-box {
+    background: #fff;
+
+    // padding: 15px 0px;
+    // box-shadow: 1px 1px 2px 2px #ededed;
+    .title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #333333;
+      padding-left: 20px;
+    }
+  }
+
+  .collapse-title {
+    flex: 1 0 90%;
+    order: 1;
+  }
+
+  .el-collapse-item__header {
+    flex: 1 0 auto;
+    order: -1;
+  }
+
+  .course-interact {
+    height: 54px;
+    // padding-top: 10px;
+    // padding-right: 10px;
+    padding: 0 20px;
+    line-height: 54px;
+    background-color: #FFFFFF;
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+  }
+
+  .interact-btn {
+    margin-right: 10px;
+  }
+
+  .uc-badge {
+    margin-top: 10px;
+    margin-right: 40px;
+  }
+
+  .cres-list {
+    list-style-type: decimal;
+    margin: 0px;
+
+    li {
+      line-height: 30px;
+    }
+
+    .current {
+      color: #1ea0fa;
+    }
+  }
+
+  .uc-course {
+    display: flex;
+    justify-content: space-around;
+    border: 1px solid #f0f0f0;
+    padding: 10px;
+
+    .uc-course-img {
+      width: 200px;
+
+      img {
+        width: 200px;
+        border: 1px solid #f4f4f5;
+      }
+    }
+
+    .uc-course-info {
+      flex: 1;
+      line-height: 28px;
+      padding: 0px 10px;
+
+      .uc-course-name {
+        font-size: 18px;
+        font-weight: 700;
+      }
+
+      .uc-course-text {
+        color: #747474;
+      }
+    }
+
+    .uc-course-btns {
+      width: 150px;
+    }
+  }
+
+  .catalog-cell-state2 {
+    height: 24px;
+    width: 58px;
+    line-height: 20px;
+    border: 0px dotted #bed2f8;
+    padding: 3px 10px;
+    color: #ff8e00;
+    font-size: 12px;
+    border-radius: 6px;
+    margin-left: 2px;
+    background: #ffedd6;
+  }
+
+  .catalog-cell-state9 {
+    height: 24px;
+    width: 58px;
+    line-height: 20px;
+    border: 0px dotted #bed2f8;
+    padding: 3px 10px;
+    color: #3e7fff;
+    font-size: 12px;
+    border-radius: 6px;
+    margin-left: 2px;
+    background: #edf2fd;
+    // margin-left: 68%;
+    // background-color: #BED2F8;
+  }
+
+  .catalog-cell-state1 {
+    height: 24px;
+    width: 58px;
+    line-height: 20px;
+    border: 0px dotted #edf2fd;
+    border-radius: 6px;
+    padding: 3px 10px;
+    color: #ff3e3e;
+    font-size: 12px;
+    margin-left: 2px;
+    background: #fff0f0;
+  }
+
+  .catalog {
+    height: 100%;
+    max-width: 500px;
+    overflow: auto;
+
+    .catalog-row {
+      margin: 0px;
+      padding: 0px 10px 10px 10px;
+
+      .title-type {
+        width: 36px;
+        height: 24px;
+        padding: 2px 5px;
+        color: #666666;
+        border: 1px solid #666666;
+        margin-right: 8px;
+      }
+
+      ul {
+        padding: 0px;
+        margin: 0px;
+
+        li {
+          padding: 6px 0;
+        }
+      }
+
+      .catalog-cell {
+        line-height: 32px;
+        cursor: pointer;
+        list-style: none;
+        margin: 0px;
+        padding-left: 20px;
+        color: #5c5c5c;
+      }
+    }
+  }
+
+  .video-div {
+    position: absolute;
+    z-index: 999999999;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(101, 101, 101, 0.9);
+
+    .good {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 200px;
+
+      div {
+        line-height: 1;
+        margin: 0 15px;
+
+        .svg-icon {
+          width: 30px;
+          height: 30px;
+        }
+      }
+
+      div:nth-of-type(2) {
+        .svg-icon {
+          transform: scaleX(-1);
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+
+  ::v-deep .el-tag {
     background-color: #ecf5ff;
     border-color: #409EFF;
     display: inline-block;
@@ -1474,191 +1654,161 @@ export default {
     border-radius: 0px;
     box-sizing: border-box;
     white-space: nowrap;
-}
-::v-deep .teacher .teacher-avator .teacher-text{
-  background: none;
-  border: none;
-}
-.teacher {
-  background-color: #ffffff;
-  display: flex;
-   border-top: none;
-  padding: 10px 0px;
-  .teacher-avator {
-    ::v-deep .el-avatar {
-      width: 60px !important;
-      height: 60px !important;
-      border-radius: 50%;
-    }
-    .teacher-text {
-      width: 68px;
-      height: 68px;
-      div{
-        img{
-           width: 68px;
-           height: 68px;
+  }
+
+  ::v-deep .teacher .teacher-avator .teacher-text {
+    background: none;
+    border: none;
+  }
+
+  .teacher {
+    background-color: #ffffff;
+    display: flex;
+    border-top: none;
+    padding: 10px 0px;
+    .teacher-avator {
+      ::v-deep .el-avatar {
+        width: 60px !important;
+        height: 60px !important;
+        border-radius: 50%;
+      }
+      .teacher-text {
+        width: 68px;
+        height: 68px;
+
+        div {
+          img {
+            width: 68px;
+            height: 68px;
+          }
         }
       }
-      // text-align: center;
-      // line-height: 68px;
-      // border-radius: 50%;
-      // color: #73adfe;
-      // border: 2px solid #73adfe;
-      // background: #d9e9ff;
+    }
+    .teacher-info {
+      flex: 1;
+      .teacher-name {
+        padding: 5px 5px 10px 10px;
+      }
+      .teacher-remark {
+        padding: 0px 5px 0 10px;
+        font-size: 14px;
+        color: #666666;
+        line-height: 20px;
+        overflow:hidden;
+        text-overflow:ellipsis;
+        white-space:nowrap;
+      }
     }
   }
-  .teacher-info {
-    flex: 1;
-    .teacher-name {
-      padding: 0px 5px 10px 10px;
-    }
-    .teacher-remark {
-      padding: 0px 5px 0 10px;
-      font-size: 14px;
-      color: #666666;
-      line-height: 20px;
+
+
+
+  .breadname {
+    margin-bottom: 15px;
+  }
+
+  //目录的样式更改
+  ::v-deep .el-collapse-item {
+    .el-collapse-item__header {
+      // position: relative;
+      direction: rtl;
+      display: flex;
+      // justify-content;
+      justify-content: space-between;
+
+      // .el-collapse-item__arrow{
+      //   float:right;
+      // }
+      // span{
+      //   float:right;
+      // }
+      i {
+        display: none
+      }
     }
   }
-}
-.teachers {
-  background-color: #fff;
-  padding: 36px;
-  margin-top: 0;
-  .top {
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 50px;
-  }
-}
-.breadname {
-  margin-bottom: 15px;
-}
-//目录的样式更改
-::v-deep .el-collapse-item{
-  .el-collapse-item__header{
-    // position: relative;
-    direction:rtl;
-    display: flex;
-    // justify-content;
-    justify-content: space-between;
-    // .el-collapse-item__arrow{
-    //   float:right;
-    // }
-    // span{
-    //   float:right;
-    // }
-    i{
-      display:none
+
+  .course-units {
+
+    .units-info {
+      padding: 0 30px;
+      height: 60px;
+      line-height: 60px;
+      font-size: 16px;
+    }
+
+    .units-active {
+      background: #F6F6F6;
+      color: #387DF7;
+      font-weight: 600;
+
+      img {
+        width: 18px;
+        height: 20px;
+        vertical-align: middle;
+        margin-right: 20px;
+      }
     }
   }
-}
-.course-units{
-   
-     .units-info{
-          padding: 0 30px;
-         height: 60px;
-         line-height: 60px;
-         font-size: 16px;
-     }
-     .units-active{
-         background: #F6F6F6;
-         color: #387DF7;
-         font-weight: 600;
-         img{
-             width: 18px;
-             height: 20px;
-             vertical-align: middle;
-             margin-right: 20px;
-         }
-     }
-}
-.more{
+
+  .more {
     float: right;
-}
+  }
 
-
-
-
-.coures-content{
-    height: 745px;
-    margin: 20px 80px;
-    background-color: #fff;
-    display: flex;
-    .coures-infobox{
-       width: 500px;
-        .coures-info{
-        height: 710px;
-        background-color: #fff;
-       
-        box-sizing: border-box;
-        .hear-tab{
-            margin: 35px 30px 10px 30px;
-            width: 300px;
-            border-bottom: 1px solid #D8D8D8 ;
-            display: flex;
-            padding-bottom: 12px;
-            div{
-                flex: 1;
-                color: #666666;
-            }
-            .tab-active{
-                color: #333333;
-                font-weight: 600;
-            }
-        }
-    }
-    }
-   
-    .coures-play{
-        flex: 1;
-        min-height: 745px;
-    }
-}
-.coures-title{
-        margin-left:82px;
-        font-size: 20px;
-        font-weight: 600;
-        color: #FFFFFF; 
-        margin-top: 25px;
-        div{
-            float: left;
-            font-size: 20px;
-            font-weight: 600;
-            color: #FFFFFF; 
-            line-height: 20px;
-
-        }
-    span{
-        float: left;
-        font-size: 16px;
-        font-weight: 400;
-        color: #FFFFFF;
-        margin-left: 27px;
-    }
-    h6{
-        float: left;
-        font-size: 16px;
-        font-weight: 600;
-        color: #FFFFFF;
-        margin: 0 20px;
-
-    }
-}
-::v-deep.el-breadcrumb__item:first-child .el-breadcrumb__inner a, .el-breadcrumb__inner .is-link {
-    color: #fff !important;
-}
-::v-deep.el-breadcrumb__item:last-child .el-breadcrumb__inner{
-    color: #fff !important;
-}
-::v-deep.hear-nav{
-  color: #fff !important;
-}
-.breadcrumb-nav{
+  .coures-title {
+    margin-left: 82px;
+    font-size: 20px;
+    font-weight: 600;
     color: #FFFFFF;
-}
- .coures-bg{
-     width: 100%;
-     height: 200px;
-     background: url('../../../public/images/couresdetail.png');
- }
-</style>
\ No newline at end of file
+    margin-top: 25px;
+
+    div {
+      float: left;
+      font-size: 20px;
+      font-weight: 600;
+      color: #FFFFFF;
+      line-height: 20px;
+
+    }
+
+    span {
+      float: left;
+      font-size: 16px;
+      font-weight: 400;
+      color: #FFFFFF;
+      margin-left: 27px;
+    }
+
+    h6 {
+      float: left;
+      font-size: 16px;
+      font-weight: 600;
+      color: #FFFFFF;
+      margin: 0 20px;
+
+    }
+  }
+
+  ::v-deep.el-breadcrumb__item:first-child .el-breadcrumb__inner a,
+  .el-breadcrumb__inner .is-link {
+    color: #fff !important;
+  }
+
+  ::v-deep.el-breadcrumb__item:last-child .el-breadcrumb__inner {
+    color: #fff !important;
+  }
+
+  ::v-deep.hear-nav {
+    color: #fff !important;
+  }
+
+  .breadcrumb-nav {
+    color: #FFFFFF;
+  }
+
+  .coures-bg {
+    width: 100%;
+    height: 200px;
+    background: url('../../../public/images/couresdetail.png');
+  }
+</style>
diff --git a/src/views/ucurrency/Index.vue b/src/views/ucurrency/Index.vue
index 9dcc50a7..ecbcfb73 100644
--- a/src/views/ucurrency/Index.vue
+++ b/src/views/ucurrency/Index.vue
@@ -3,7 +3,7 @@
        <div class="myubi">
            <div class="ubi-hear">
                <h6>我的U币:{{uinfo.uCurrency}}</h6><span class="pointer" @click="dialogVisible = true">U币规则 <i class="el-icon-arrow-right"></i> </span>
-                <el-button @click="exportRecord()">导出记录</el-button>
+                <el-button icon="el-icon-document" @click="exportRecord()">导出记录</el-button>
            </div>
            <div style="max-height:600px;overflow-y:auto;padding-right:50px">
                 <div class="Ubi-hist">