整体门户页面的样式，宽度的处理

src/views/portal/course/Index.vue

@@ -3,9 +3,9 @@
     <div class="course-banner">
       <portal-header current="course" @emitInput="emitInput"></portal-header>
     </div>
-    <div class="xcontent portal-content">
-      <div class="xrow" style="display: flex;justify-content: space-between;">
-        <div style="flex: 1;margin-right:0px" class="xcol content-div">
+    <div class="">
+      <div class="xcontent2">
+        <div class="xcontent2-main content-div">
           <div class="search-div" style="margin-right:36px">
             <div class="searchbar" v-if="searchTags.length > 0">
               <div style="line-height: 30px;">
@@ -45,6 +45,8 @@
                             <svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
                           </span>
                       </span>
+                      <span @click="jumOpen()" class="Uxtext" style="margin-left: 30px;"> 公开课
+                      </span>
                   </div>
                   <div class="search-item-sub" v-if="types.oneSubList.length != 0">
                     <span class="item-title" style="width: 40px;">分类:</span>
@@ -69,33 +71,34 @@
               </el-row>
             </div>
           </div>
-          <div class="order-div" v-if="listType == 1">
+          <div class="order-div">
             <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>
           </div>
-          <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)">
+          <div class="xcourse-list">
+            <div class="xcourse-card" v-for="(cinfo,cidx) in courseList" :key="cinfo.id" v-if="(courseList.length<=course.pageSize) || (cidx<parseInt(courseList.length/columns)*columns)">
               <div class="course-card">
                 <a :href="toCourseDetail(cinfo)">
-                  <div class="course-image-box" style="height:196px">
-                    <course-image height="196px" :course="cinfo"></course-image>
+                  <div class="course-image-box">
+                    <course-image :course="cinfo"></course-image>
                   </div>
-                  <div :title="cinfo.title" class="course-title two-line-ellipsis"  v-html="cinfo.name">
-                  </div>
-                  <div class="course-author">
-                  <div class="course-author-left">
-                     <span  v-if="cinfo.teacher">{{cinfo.teacher=='BOE教师'? '':cinfo.teacher}}</span>
-                     <span class="study-num">{{cinfo.studies}}人学习</span>
-                  </div>
-                  <div style="display:flex">
-                    <div class="cor-praises" v-if="cinfo.source == 2"><interactBar :type="1" :data="cinfo" :courseExclusive="true" :comments="false" :praises="false" :shares="false" :views="false"></interactBar> </div>
+                  <div class="course-title two-line-ellipsis" :title="cinfo.title"   v-html="cinfo.name"></div>
+                  <div class="course-info">
+                    <div class="course-info-user">
+                       <span class="course-info-author"  v-if="cinfo.teacher">{{cinfo.teacher=='BOE教师'? '':cinfo.teacher}}</span>
+                       <span class="course-info-studys">{{cinfo.studies}}+人学习</span>
+                    </div>
+                    <div class="course-info-score">
+                      <div class="cor-praises" v-if="cinfo.source == 2">
+                        <interactBar :type="1" nodeWidth="20px" :data="cinfo" :courseExclusive="true" :comments="false" :praises="false" :shares="false" :views="false"></interactBar>
+                      </div>
                       <div>
-                        <div v-if="cinfo.score">
-                          <span class="course-score-value">{{toScore(cinfo.score)}}分</span>
-                        </div>
-                        <div v-else class="course-score-no">未评分</div>
+                          <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>
                   </div>
@@ -110,7 +113,7 @@
             <span class="pag-text-msg" v-else-if="moreState == 3">没有更多数据了</span>
           </div>
         </div>
-        <div class="xpage-right">
+        <div class="xcontent2-minor">
             <div id="fixd-box">
               <div v-if="identity == 2 || identity == 3 || identity == 5">
                 <div class="portal-model-btn pointer" @click="toNeedCourse">
@@ -118,9 +121,9 @@
                       上传课程
                 </div>
               </div>
-            <div class="ranking-card portal-right-box list-bg">
-                <p class="portal-title-one" style="padding-bottom:12px">好评榜</p>
-                <ul>
+              <div class="portal-ranking 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;">
                         <span class="portal-right-text blue-one" v-if="index==0">
                           <img src="/images/listblue01.png" alt="">
@@ -163,9 +166,9 @@
                    </li>
                 </ul>
               </div>
-            <div style="margin-top:26px" class="ranking-card portal-right-box list-bg1">
-                <p class="portal-title-one" style="padding-bottom:12px">人气榜</p>
-                <ul>
+              <div style="margin-top:26px" class="portal-ranking 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;">
                         <span class="portal-right-text orange-one" v-if="index==0">
                           <img src="/images/list-01.png" alt="">
@@ -208,9 +211,9 @@
                    </li>
                 </ul>
               </div>
-              <div style="margin-top:26px" class="ranking-card portal-right-box list-bg2">
-                <p class="portal-title-one" style="padding-bottom:12px">热度榜</p>
-                <ul>
+              <div style="margin-top:26px" class="portal-ranking 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;">
                         <span class="portal-right-text orange-one" v-if="index==0">
                           <img src="/images/listred01 .png" alt="">
@@ -257,7 +260,6 @@
                 <img :src="fileBaseUrl + resonimg.image" alt="">
               </div>
             </div>
-
         </div>
       </div>
     </div>
@@ -354,7 +356,6 @@ export default {
       },
       data: [{}, {}, {}, {}],
       order: 1,
-      listType: 1,
       courseList: [],
       searchRecords: [],
       hotList: [],
@@ -439,6 +440,9 @@ export default {
     jumUX() {
       window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130", "_blank");
     },
+    jumOpen(){
+       //公开课 openCourse=1
+    },
     emitInput(val) {
       this.course.keyword = val;
       this.searchData();
@@ -455,7 +459,7 @@ export default {
       }
       if (scrollTop > 830) {
         document.querySelector("#fixd-box").style.cssText =
-          "position: fixed;top: -914px;width:242.5px";
+          "position: fixed;top: -914px;";
       } else {
         document.querySelector("#fixd-box").style.cssText = "position: static";
       }
@@ -843,10 +847,7 @@ export default {
     border-radius: 8px;
   }
 }
-.course-card{
-  // height: 196px;
-     position: relative;
-}
+
 ::v-deep .course-image-box :hover .el-image{
         // transition: all 0.5s;
         z-index: 999;
@@ -937,10 +938,11 @@ export default {
   display: block;
 }
 
-  .course-banner{
-    height: 240px;
-    background: url('/images/course-banner.png');
-  }
+.course-banner{
+  height: 240px;
+  background: url('/images/course-banner.png');
+}
+
 ::v-deep .el-radio-button{
   margin-right:0px;
 }
@@ -999,14 +1001,10 @@ export default {
 }
 ::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: 10px 10px 10px 0;
   font-size: 14px;
@@ -1017,203 +1015,7 @@ export default {
   height: 20px;
   background: #ddd;
 }
-.course-card {
-  padding: 30px;
-  padding-bottom: 18px;
-  margin-bottom: 36px;
-  background: #fff;
-  border-radius: 8px;
-  margin-right: 35px;
-  ::v-deep .cor-praises {
-    // position: absolute;
-    -moz-user-select: none; /*火狐*/
-    -webkit-user-select: none; /*webkit浏览器*/
-    -ms-user-select: none; /*IE10*/
-    -khtml-user-select: none; /*早期浏览器*/
-    user-select: none;
-    .interact-bar-btn {
-      margin-top: -2px;
-      min-width: 26px !important;
-      width: 32px;
-      height: 20px;
-      background:rgba(237, 239, 240,0.5);
-      border-radius: 20px;
-      margin-top: 4px;
-      margin-right: 12px;
-      .interact-bar-value {
-        display: none;
-      }
-      .svg-icon{
-        font-size: 12px !important;
-        margin-left: 10px;
-        margin-bottom: 6px;
-      }
-    }
-  }
-  .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: 196px;
-    // width: 350px;
-    width: 100%;
-    height: 100%;
-    ::v-deep .el-image{
-      border-radius: 4px !important;
-    }
-    .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;
-      -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 {
-    height: 44px;
-    // margin: 10px 0;
-    margin: 16px 0 20px 0px;
-    line-height: 24px;
-    font-size: 16px;
-    font-weight: 600;
-    color: #333333;
-    -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;
-      line-height: 30px;
-      color: #6E7B84;
-    }
-  }
-  .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";
-      -moz-user-select: none; /*火狐*/
-      -webkit-user-select: none; /*webkit浏览器*/
-      -ms-user-select: none; /*IE10*/
-      -khtml-user-select: none; /*早期浏览器*/
-      user-select: none;
-      // font-size: 30px;
-    }
-    .course-score-no {
-      font-size: 12px;
-      color: #ffb30f;
-      -moz-user-select: none; /*火狐*/
-      -webkit-user-select: none; /*webkit浏览器*/
-      -ms-user-select: none; /*IE10*/
-      -khtml-user-select: none; /*早期浏览器*/
-      user-select: none;
-    }
-  }
-}
-.course-score-no {
-  text-align: right;
-  font-size: 14px;
-  color: #6B7C85;
-  line-height: 30px;
-}
-.course-score-value {
-  font-size: 14px;
-  color: #FA6400;
-  // margin-left: 32px;
-  line-height: 30px;
-  font-family: "Arial";
-  // font-size: 30px;
-}
-.study-num {
-  line-height: 30px;
-  font-size: 14px;
-  margin-left: 12px;
-  color: #6E7B84;
-  -moz-user-select: none; /*火狐*/
-  -webkit-user-select: none; /*webkit浏览器*/
-  -ms-user-select: none; /*IE10*/
-  -khtml-user-select: none; /*早期浏览器*/
-  user-select: none;
-}
-.btn-label {
-}
 .btn-label {
   position: relative;
   display: inline-block;
@@ -1253,9 +1055,7 @@ export default {
   height: 50px;
 }
 .content-div {
-
   .quyer-tag {
-
     // margin-left: 10px;
     .order-class {
       margin: 30px 0;
@@ -1290,6 +1090,7 @@ export default {
   .search-div {
     background: #fff;
     padding: 10px 25px;
+    border-radius: 8px;
     ::v-deep .el-input {
       width: 420px;
       height: 38px;
@@ -1353,151 +1154,29 @@ export default {
   .order-div {
     padding: 0px 15px 0 0px;
   }
-  .data-content {
-    // padding: 5px 0px;
-    .course-card {
-      // width: 290px;
-      margin-bottom: 36px;
-      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;
-  }
 }
+// .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;
-  }
+// .right-box {
+//   .add-btn {
+//     width: 100%;
+//     padding: 15px 0;
+//   }
+//   .ranking-card {
+//     margin-top: 0px;
+//   }
+
+//   .ranking-data {
+//     margin: 10px 0;
+//     color: #999999;
+//   }
+// }
 
-  .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>