首页课程适应调整

src/assets/styles/portal-index.scss

@@ -1,9 +1,246 @@
+/**此文件应该只是包含首页的样式*/
 
-.portal-right-box{
+//首页版心内容区域
-    width: 410px;
+.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,42 +456,25 @@
 }
 // boe-index
 @media screen and (max-width: 1366px){
-  .xcontent{
+  .xindex-content{
-    // width: 1000px;
+    width: 1100px;
-    // 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-course{
-    .portal-right-box{
+    width: 240px;
-        width: 344px;
+    padding: 20px;
-        // height: 544px;
+    margin-right: 20px;
-        // overflow-y: auto;
+    margin-bottom: 20px;
-        .course-index-list{
+    .course-image-box{
-            height: 410px;
+     width: 200px;
-            overflow-y: auto;
-        }
-        .case-index-list{
      height: 114px;
-            overflow-y: auto;
+      ::v-deep .course-image{
+        height: 100% !important;
       }
-        .anking-index-list{
-            height: 320px;
-            overflow-y: auto;
     }
-        .qa-index-qa{
-            height: 64px;
-            overflow-y: auto;
   }
+  .xindex-ranking{
+    width: 300px;
   }
     .boe-index{
        width: 235px;
@@ -449,23 +669,23 @@
     }
  }
 }
-  @media screen and (max-width: 1680px) and (min-width:1367px){
+@media screen and (max-width: 1680px) and (min-width:1367px){
-    .xcontent{
+  .xindex-content{
-      // width: 1000px;
+    width: 1366px;
-      // margin: 0px auto;
+  }
-      margin: 0px 5%;
+  .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-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: 344px;
         .course-index-list{
@@ -663,22 +883,24 @@
           }
     }
   }
-  }
+}
 
-  @media screen and (max-width: 1920px) and (min-width: 1681px){
+@media screen and (max-width: 1920px) and (min-width: 1681px){
-    .xcontent{
+  .xindex-content{
-      // width: 1000px;
+    width: 1640px;
-      // margin: 0px auto;
+  }
-      // margin: 0px 5%;
+  .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-content {
-      margin: 26px 87px 0px 87px;
-      // width: 100%;
-      .breadcrumb-nav {
-          margin-bottom: 15px;
-          font-size: 14px;
-          font-weight: normal;
-          color: #666666;
     }
   }
 
@@ -887,24 +1109,24 @@
 }
   }
 
-  @media screen and (min-width: 1921px){
+@media screen and (min-width: 1921px){
-    .xcontent{
+  .xindex-content{
-      // width: 1000px;
+    width: 1880px;
-      // margin: 0px auto;
+  }
-      margin: 0px 8%;
+  .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-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;

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;

src/views/Index.vue

@@ -35,7 +35,7 @@
         </ul>
       </div>
     </div>
-    <div class="portal-content xcontent" >
+    <div class="xindex-content" >
       <!-- 推荐课程 -->
       <div class="modules">
         <div>
@@ -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  v-for="course in courseList.list" :key="course.id" class="xindex-course">
-              <div class="course-card boe-index">
                 <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>
@@ -104,10 +103,9 @@
             </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;">