From c43678d326bed424c9653d26c499fa92c9390154 Mon Sep 17 00:00:00 2001
From: daihh <seastar@bjxask.com>
Date: Wed, 5 Oct 2022 14:29:10 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E8=AF=BE=E7=A8=8B=E9=80=82?=
 =?UTF-8?q?=E5=BA=94=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/portal-index.scss | 824 ++++++++++++++++++----------
 src/components/PortalFloatTools.vue |   2 +-
 src/views/Index.vue                 |  64 ++-
 3 files changed, 555 insertions(+), 335 deletions(-)

diff --git a/src/assets/styles/portal-index.scss b/src/assets/styles/portal-index.scss
index 46bb4011..87729ed1 100644
--- a/src/assets/styles/portal-index.scss
+++ b/src/assets/styles/portal-index.scss
@@ -1,9 +1,246 @@
+/**此文件应该只是包含首页的样式*/
 
-.portal-right-box{
-    width: 410px;
-    border-radius: 8px;
-    padding: 30px;
+//首页版心内容区域
+.xindex-content {
+  font-family: 'Noto Sans SC';
+  margin: 26px auto;
 }
+.xindex-row{
+  display: inline-block;
+}
+// 课程卡片
+.xindex-course{
+    display: inline-block;
+    vertical-align: top;
+    border:1px solid #efefef;
+    padding: 20px;
+    font-size:0;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    box-sizing: border-box;
+    position: relative;
+    background-color: #ffffff;
+
+    .cor-praises {
+      position: absolute;
+      right: 50px;
+      bottom: 16px;
+      .interact-bar-btn{
+        .interact-bar-value{
+          display: none;
+        }
+      }
+    }
+
+    .xindex-course-image{
+      position: relative;
+      min-height: 114px;
+      // 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;
+        }
+      }
+    }
+
+    .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;
+        -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;
+      }
+  }
+
+.xindex-course:hover .cardmark {
+  opacity: 1;
+}
+
+.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;
@@ -219,43 +456,26 @@
 }
 // boe-index
 @media screen and (max-width: 1366px){
-  .xcontent{
-    // width: 1000px;
-    // margin: 0px auto;
-    margin: 0px 5%;
-}
-  .portal-content {
-    margin: 26px 87px 0px 87px;
-    // width: 100%;
-    .breadcrumb-nav {
-        margin-bottom: 15px;
-        font-size: 14px;
-        font-weight: normal;
-        color: #666666;
+  .xindex-content{
+    width: 1100px;
+  }
+  //课程卡片样式
+  .xindex-course{
+    width: 240px;
+    padding: 20px;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    .course-image-box{
+     width: 200px;
+     height: 114px;
+      ::v-deep .course-image{
+        height: 100% !important;
+      }
     }
   }
-   
-    .portal-right-box{
-        width: 344px;
-        // height: 544px;
-        // overflow-y: auto;
-        .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;
-        }
-    }
+  .xindex-ranking{
+    width: 300px;
+  }
     .boe-index{
        width: 235px;
        padding: 20px;
@@ -320,7 +540,7 @@
          font-size: 12px;
          line-height: 14px;
        }
-       
+
     }
  }
  .boe-qa-index{
@@ -351,7 +571,7 @@
         ::v-deep .item-author div{
             width: 30px !important;
             height: 30px !important;
-        } 
+        }
         .el-avatar{
             width: 26px !important;
             height: 26px !important;
@@ -391,7 +611,7 @@
         .article-info-image-box{
             width: 200px;
             height: 112px;
-           
+
         }
         .el-avatar{
             width: 26px !important;
@@ -444,28 +664,28 @@
                 display: none;
               }
             }
-            
+
           }
     }
  }
 }
-  @media screen and (max-width: 1680px) and (min-width:1367px){
-    .xcontent{
-      // width: 1000px;
-      // margin: 0px auto;
-      margin: 0px 5%;
+@media screen and (max-width: 1680px) and (min-width:1367px){
+  .xindex-content{
+    width: 1366px;
   }
-    .portal-content {
-      margin: 26px 87px 0px 87px;
-      // width: 100%;
-      .breadcrumb-nav {
-          margin-bottom: 15px;
-          font-size: 14px;
-          font-weight: normal;
-          color: #666666;
+  .xindex-course{
+    width: 330px;
+    padding: 25px;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    .course-image-box{
+     width: 280px;
+     height: 100px;
+      ::v-deep .course-image{
+        height: 100% !important;
       }
     }
-     
+  }
     .portal-right-box{
         width: 344px;
         .course-index-list{
@@ -543,7 +763,7 @@
          line-height: 20px;
          margin-bottom: 30px;
        }
-       
+
     }
  }
  .boe-qa-index{
@@ -607,7 +827,7 @@
         .article-info-image-box{
             width: 250px;
             height: 162px;
-           
+
         }
         // .el-avatar{
         //     width: 26px !important;
@@ -659,252 +879,30 @@
                 }
               }
             }
-            
+
           }
     }
- }
   }
-  
-  @media screen and (max-width: 1920px) and (min-width: 1681px){
-    .xcontent{
-      // width: 1000px;
-      // margin: 0px auto;
-      // margin: 0px 5%;
+}
+
+@media screen and (max-width: 1920px) and (min-width: 1681px){
+  .xindex-content{
+    width: 1640px;
   }
-    .portal-content {
-      margin: 26px 87px 0px 87px;
-      // width: 100%;
-      .breadcrumb-nav {
-          margin-bottom: 15px;
-          font-size: 14px;
-          font-weight: normal;
-          color: #666666;
-      }
-    }
-     
-    .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;
-      }
-  }
-  .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;
-          }
-     }
-  }
-  .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: 36px;
-    }
-.boe-case-index{
-  width: 410px;
-  height: 396px;
-  margin-right: 36px;
-  .case-top{
-      height: 120px;
-  }
-  .case-conent{
+  .xindex-course{
+    width: 410px;
+    padding: 30px;
+    margin-right: 36px;
+    margin-bottom: 36px;
+    border-radius: 8px;
+    .course-image-box{
      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;
-     }
-     
-  }
-}
-.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;
-      }
+     height: 196x;
+         ::v-deep .course-image{
+             height: 100% !important;
+         }
     }
-  .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;
-       }
   }
-  .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){
-    .xcontent{
-      // width: 1000px;
-      // margin: 0px auto;
-      margin: 0px 8%;
-  }
-    
-.portal-content {
-  // margin: 26px 87px 0px 87px;
-  width: 1746px;
-  margin: 0 auto;
-  .breadcrumb-nav {
-      margin-bottom: 15px;
-      font-size: 14px;
-      font-weight: normal;
-      color: #666666;
-  }
-}
 
     .portal-right-box{
       width: 410px;
@@ -984,7 +982,7 @@
        line-height: 20px;
        margin-bottom: 30px;
      }
-     
+
   }
 }
 .boe-qa-index{
@@ -1052,7 +1050,7 @@
       .article-info-image-box{
           width: 352px;
           height: 196px;
-         
+
       }
       .el-avatar{
           width: 32px !important;
@@ -1105,7 +1103,231 @@
               }
             }
           }
-          
+
+        }
+  }
+}
+  }
+
+@media screen and (min-width: 1921px){
+  .xindex-content{
+    width: 1880px;
+  }
+  .xindex-course{
+    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;
+         }
+    }
+  }
+
+    .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;
+      }
+  }
+  .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;
+          }
+     }
+  }
+  .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: 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;
+     }
+
+  }
+}
+.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;
+
+      }
+      .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/components/PortalFloatTools.vue b/src/components/PortalFloatTools.vue
index a5ca5c62..78cb267a 100644
--- a/src/components/PortalFloatTools.vue
+++ b/src/components/PortalFloatTools.vue
@@ -240,7 +240,7 @@ export default {
     // box-shadow:0px 0px 10px #999;
     border-radius: 4px;
     // border: 1px solid #f0f0f0;
-    right: 24px;
+    right: 15px;//由24修改为15
     bottom: 126px;
     // padding:0 8px;
     display: flex;
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 28e85e2b..15be5c24 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -9,8 +9,8 @@
             </div>
             <img class="banner-img" style=" margin: 0 auto;" :src=" fileBaseUrl + item.image" alt="">
           </swiper-slide>
-        </swiper>   
-      </div> 
+        </swiper>
+      </div>
       <div class="personal-panel">
         <div class="personal-img">
           <author-img :avatar="userInfo.avatar" :aid="userInfo.aid" :sex="userInfo.sex"></author-img>
@@ -35,11 +35,11 @@
         </ul>
       </div>
     </div>
-    <div class="portal-content xcontent" >
+    <div class="xindex-content" >
       <!-- 推荐课程 -->
       <div class="modules">
         <div>
-               <!--内容块-->
+          <!--内容块-->
           <div class="modules-title">
             <span class="modules-text">推荐课程</span>
             <span class="quyer-tag">
@@ -57,10 +57,10 @@
           </div>
           <div class="modules-list xrow" style="margin-right:0px">
             <!--一个固定内容-->
-            <div class="xrow-course course-index">
-              <div class="course-card boe-index">
+
+              <div class="xindex-course">
                 <a href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course">
-                  <div class="course-image-box">
+                  <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>
@@ -78,12 +78,11 @@
                   </div>
                 </a>
               </div>
-            </div>
+
             <!--内容列表内容-->
-            <div  v-for="course in courseList.list" :key="course.id" class="xrow-course course-index">
-              <div class="course-card boe-index">
+            <div  v-for="course in courseList.list" :key="course.id" class="xindex-course">
                 <a :href="toCourseDetail(course)">
-                  <div class="course-image-box">
+                  <div class="xindex-course-image">
                     <course-image :course="course"></course-image>
                     <span v-if="course.type == 20 || 10" class="course-type">录播课</span>
                   </div>
@@ -101,13 +100,12 @@
                   </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>
-     
+
         <div style="margin-top:60px">
-          <div class="ranking-card portal-right-box course-ran-bg">
+          <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;">
@@ -139,7 +137,7 @@
                       </div>
                    </li>
                 </ul>
-              </div>
+          </div>
         </div>
       </div>
         <!-- 推荐案例2版 -->
@@ -209,7 +207,7 @@
                   <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>
                       <div class="article-info">
                         <div class="article-info-title " style="margin-top:10px">
                           <div class="one-line-ellipsis">
@@ -258,8 +256,8 @@
                         </div>
                       </div>
                   </div>
-                      
-                  
+
+
                   <!-- <div class="article-info-box">
                     <div class="article-info">
                       <div class="article-body" style="display:flex;">
@@ -420,9 +418,9 @@ export default {
   	 navigation: {
    	 nextEl: '.swiper-button-next',
    	 prevEl: '.swiper-button-prev',
- 	  },    
+ 	  },
    },
-   
+
       couname:'',
       isNext: true,
       pageIndex: 1,
@@ -465,11 +463,11 @@ export default {
     this.getQaAnswers();
   },
   computed: {
-    
+
   swiper() {
    return this.$refs.mySwiper.swiper
   }
-  
+
   },
   created(){
    // undefined
@@ -494,7 +492,7 @@ export default {
           this.answersList = res.result;
         }
       })
-      
+
     },
     getAnkingData() {//  文章排行榜
       apiIndex.articleViews(7).then(res => {
@@ -525,7 +523,7 @@ export default {
       });
     },
     // bgfun(){
-    //  console.log(this.$refs.bannimg[0]); 
+    //  console.log(this.$refs.bannimg[0]);
     //  this.$nextTick(() => {
 		// 		console.log(this.$refs.bannimg[0])
 		// 	})
@@ -533,7 +531,7 @@ export default {
      couresreso(){
       let key = 'index';
       apiPlace.detail(key).then(res=>{
-        let lmj =  JSON.parse(res.result.content) 
+        let lmj =  JSON.parse(res.result.content)
         this.resonimg = lmj
         // console.log(this.resonimg)
       })
@@ -845,7 +843,7 @@ export default {
           color: #6E7B84;
         }
       }
-      
+
     }
 
 //   ::v-deep .course-image-box :hover .el-image{
@@ -856,7 +854,7 @@ export default {
 //         left: -35px;
 //         width: 420px !important;
 //         height: 236px !important;
-    
+
 // }
   .course-ran-bg{
     background: linear-gradient(180deg, #d7eaff 1%, #FAFAFA 24%);
@@ -915,7 +913,7 @@ export default {
       }
     }
     .personal-ul{
-      
+
       display: flex;
       justify-content: space-between;
       .label{
@@ -1021,7 +1019,7 @@ export default {
    filter:blur(5px);
     z-index:-1;
     background-size:100% 100%;
-   
+
 }
 
 ::v-deep.swiper-slide .games .swiper-slide-active{
@@ -1079,7 +1077,7 @@ export default {
         background: linear-gradient(153deg, #A4D3DF 0%, #B4DCE6 100%);
       }
       margin-right: 0;
-      
+
     }
    .case-inter{
       position: absolute;
@@ -1132,7 +1130,7 @@ export default {
         // height: 60px;
         // font-size: 14px;
         color: #6E7B84;
-        // line-height: 20px; 
+        // line-height: 20px;
         // margin-bottom: 30px;
       }
       ::v-deep .case-info{
@@ -1227,7 +1225,7 @@ export default {
   box-sizing: border-box;
   position: relative;
   background-color: #ffffff;
- 
+
   ::v-deep .cor-praises {
     position: absolute;
     right: 52px;
@@ -1548,7 +1546,7 @@ export default {
       .article-card-left {
         // float: left;
         .article-card-box {
-          
+
           .article-info-image-box {
             .article-info {
               height: 400px;