diff --git a/src/assets/styles/portal-index.scss b/src/assets/styles/portal-index.scss
index c4bf180d..84ce846d 100644
--- a/src/assets/styles/portal-index.scss
+++ b/src/assets/styles/portal-index.scss
@@ -6,9 +6,7 @@
   padding-top: 20px;
   margin: 26px auto;
 }
-.xindex-row{
-  display: inline-block;
-}
+
 // 课程卡片
 .xindex-course{
     display: inline-block;
@@ -21,7 +19,7 @@
     box-sizing: border-box;
     position: relative;
     background-color: #ffffff;
-
+    border-radius: 8px;
     .cor-praises {
       position: absolute;
       right: 50px;
@@ -94,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;
@@ -156,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;
@@ -250,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;
@@ -367,8 +349,8 @@
   background: url('/images/list-pink.png') no-repeat 100% / 100%;
 }
 .art-bgimg{
-    background: url('/images/contribute.png') no-repeat 100% / 100%;
-    background-position:top;
+    background: url('/images/contribute.png') no-repeat top left;
+    background-size: cover;
   }
 .portal-images-title{
   display: inline-block;
@@ -478,44 +460,57 @@
       }
     }
   }
+  .xindex-ranking-li{
+    margin-top:15px;
+  }
+  .xindex-ranking-course{
+    height: 450px;
+  }
 
-    .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-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{
@@ -547,7 +542,6 @@
     }
  }
  .boe-qa-index{
-    width: 171px;
     height: 194px;
     margin-right: 20px;
     padding: 17px 12px 16px 12px;
@@ -693,56 +687,43 @@
       }
     }
   }
-    .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-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;
     }
@@ -774,7 +755,7 @@
     }
  }
  .boe-qa-index{
-    width: 254px;
+
     height: 276px;
     margin-right: 36px;
     padding: 30px;
@@ -894,60 +875,47 @@
 
 @media screen and (max-width: 1920px) and (min-width: 1681px){
   .xindex-content{
-    width: 1690px;
+      width: 1690px;
   }
   .xindex-course{
-    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;
-         }
-    }
+      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;
+           }
+      }
   }
 
-    .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-course{
+    height: 646px;
   }
-  .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-case{
+    height: 300px;
   }
+
+  .xindex-ranking-article{
+    height: 455px;
+  }
+
+  .xindex-ranking-qa{
+    height:220px;
+  }
+
+  .xindex-case {
+    padding-right: 30px;
+  }
+
   .case-inter{
       left: 20px;
       bottom:20px;
@@ -958,166 +926,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){
@@ -1142,40 +1108,25 @@
          }
     }
   }
+  .xindex-ranking-course{
+    height: 610px;
+  }
 
-    .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: 260px;
   }
-  .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: 420px;
   }
+
+  .xindex-ranking-qa{
+    height:188px;
+  }
+  .xindex-case {
+    padding-right: 30px;
+  }
+
   .case-inter{
       left: 20px;
       bottom:20px;
@@ -1186,18 +1137,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;
@@ -1209,141 +1158,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 c97eb218..dbe90c96 100644
--- a/src/assets/styles/portal.scss
+++ b/src/assets/styles/portal.scss
@@ -257,7 +257,12 @@ body {margin: 0px;padding: 0px;}
     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;
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 0341f730..4ce39275 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -56,9 +56,8 @@
               <router-link to="/course">查看更多</router-link>
             </span>
           </div>
-          <div class="modules-list xrow" style="margin-right:0px">
-            <!--一个固定内容-->
-
+          <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">
@@ -112,18 +111,12 @@
         <div class="xcontent2-minor" style="margin-top:60px">
           <div class="portal-ranking ranking-bg">
             <p class="ranking-title">课程排行榜</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;">
+            <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 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>
+                <span class="portal-title-desc title-line-ellipsis" style="font-size: 14px;">{{ item.name }}</span>
 
                 <div class="list-active">
                   <div class="list-content">
@@ -160,8 +153,8 @@
             </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="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">
@@ -190,16 +183,15 @@
                   </div>
                   <!-- -->
                 </div>
-              </li>
-            </ul>
+              </div>
+            </div>
           </div>
         </div>
         <div class="xcontent2-minor">
-          <div style="margin-top:60px" class="portal-ranking ranking-bg">
+          <div class="portal-ranking ranking-bg" style="margin-top:60px">
             <p class="ranking-title">案例排行榜</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;">
+            <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>
@@ -292,34 +284,6 @@
                       </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>
@@ -327,11 +291,11 @@
         </div>
         <!--内容块-->
         <div class="xcontent2-minor">
-          <div style="margin-top:60px" class="portal-ranking art-bgimg">
+          <div style="margin-top:60px" class="portal-ranking ranking-bg">
           <!-- 排行榜位置 -->
             <p class="ranking-title">文章排行榜</p>
-            <ul class="anking-index-list">
-              <li v-for="(item, index) in ankingList" :key="index" style="margin-top:30px;line-height: 22px;cursor: pointer;">
+            <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>
@@ -357,8 +321,8 @@
           </div>
           <div class="modules-list">
             <!--内容列表内容-->
-            <ul class="qa-box">
-              <li class="qa-card boe-qa-index" v-for="qa in qaList.list" :key="qa.id">
+            <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>
@@ -376,17 +340,16 @@
                     </p>
                   </div>
                 </div>
-              </li>
-            </ul>
+              </div>
+            </div>
           </div>
         </div>
-        <div  class="xcontent2-minor" style="margin-top:74px">
+        <div  class="xcontent2-minor">
           <!-- 排行榜 -->
-          <div class="portal-ranking ranking-bg">
+          <div class="portal-ranking ranking-bg" style="margin-top:60px">
             <p class="ranking-title">问答排行榜</p>
-            <ul class="qa-index-qa">
-              <li v-for="(item, index) in answersList" :key="index"
-                style="margin-top:30px;line-height: 22px;cursor: pointer;">
+            <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>
@@ -1197,10 +1160,10 @@
     -webkit-box-orient: vertical;
   }
 
-  .case-box {
-    display: flex;
+  // .case-box {
+  //   display: flex;
 
-    .case-index {
+  .case-index {
       position: relative;
       // width: 408px;
       // height: 396px;
@@ -1296,7 +1259,7 @@
         }
       }
     }
-  }
+  //}
 
   .casetwo {
     border: 1px solid #F0F0F0;
@@ -1591,41 +1554,6 @@
     // 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%;
@@ -1878,8 +1806,7 @@
         }
       }
 
-      .qa-box {
-        display: flex;
+
 
         .qa-card {
           // width: 298px;
@@ -1935,7 +1862,7 @@
             display: flex;
           }
         }
-      }
+
     }
   }
 </style>