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

src/assets/styles/portal.scss

@@ -1,49 +1,14 @@
 /**
  * 门户页面的一些通用样式定义在这里面
  */
-body {
+body {margin: 0px;padding: 0px;}
-    margin: 0px;
-    padding: 0px;
-}
-
-//页面版心区域
-.xcontent{
-    // width: 1000px;
-    // margin: 0px auto;
-    margin: 0px 5%;
-}
-.index-course{
-  // width: 25%;
-}
-
-.course-index{
-  // width: 33.34%;
-}
-
-.xrow{
-  margin-left: -5px;
-  margin-right: -5px;
-  box-sizing: border-box;
-}
-
-.xcol{
-  margin-right: 26px;
-  display: inline-block;
-  box-sizing: border-box;
-}
-
-.xrow-course{
-  // padding-left: 5px;
-  // padding-right: 5px;
-  display: inline-block;
-  box-sizing: border-box;
-}
 
+//[文章，案例，问答]详细页面内容部分
 .xpage-detail-content{
   padding: 50px;
   background-color: #fff;
 }
-// 详细页面的面包屑
+//[文章，案例，问答]详细页面的面包屑
 .xpage-detail-crumbs{
   .crumbs-first{
     color:#cccccc;
@@ -59,15 +24,8 @@ body {
     color:#3d3d3d;
   }
 }
-//门户页面右边
+
-.xpage-right{
+//原样式，未修改
-  width: 410px;
-}
-.portal-right-box{
-    width: 410px;
-    border-radius: 8px;
-    padding: 30px;
-}
 .portal-model-btn{// 写文章，发课程等按钮
     width: 100%;
     height: 67px;
@@ -81,95 +39,299 @@ body {
     text-align: center;
     margin-bottom: 22px;
 }
-
+//页面中的排行内容块
- .portal-ranking-box{
+.portal-ranking{
-        width: 344px;
+    border-radius: 8px;
+    padding: 30px;
     // height: 544px;
     // overflow-y: auto;
-        .course-index-list{
+    .ranking-title{
-            height: 410px;
+      font-size: 24px;
+      font-family: FZLTCHJW--GB1-0, FZLTCHJW--GB1;
+      font-weight: 600;
+      color: #000000;
+      line-height: 28px;
+      padding-bottom:12px
+    }
+    .ranking-data{
+      min-height: 246px;
+      margin: 0px;
       overflow-y: auto;
     }
-        .case-index-list{
-            height: 114px;
-            overflow-y: auto;
 }
-        .anking-index-list{
+//排行块的背景
-            height: 320px;
+.ranking-bg{
-            overflow-y: auto;
+  background: url('/images/qa-box.png') no-repeat top left;
+    // background: linear-gradient(180deg, #C3DEF8 0%, #FFFFFF 37%);
+    //background-size:100% 100%;
+    background-size:cover;
 }
-        .qa-index-qa{
+.ranking-bg1{
-            height: 64px;
+  background: url('/images/list-or.png') no-repeat top left;
-            overflow-y: auto;
+  //background-size:100% 100%;
+  background-size:cover;
+}
+.ranking-bg2{
+  background: url('/images/list-pink.png') no-repeat top left;
+  //background-size:100% 100%;
+  background-size:cover;
+}
+//左右内容栏
+.xcontent2{
+  display: flex;
+  justify-content: space-between;
+  margin: 0px auto;
+}
+
+.xcontent2-main{
+  flex: 1;
+}
+
+.xcontent2-minor{
+  width: auto;
+}
+
+//课程卡片
+.xcourse-card{
+    width: 33%;
+    margin-bottom: 36px;
+    display: inline-block;
+    vertical-align: top;
+}
+
+.course-card {
+  // padding: 30px;
+  // padding-bottom: 18px;
+  // margin-bottom: 36px;
+  background: #fff;
+  border-radius: 8px;
+  // margin-right: 35px;
+
+  // .cor-icon {
+  //   position: absolute;
+  //   left: 100px;
+  //   top: 54px;
+  //   border-radius: 50%;
+  //   background: rgba(88, 138, 252, 0.37);
+
+  //   .el-icon-caret-right {
+  //     font-size: 36px;
+  //     color: #588afc;
+  //   }
+  // }
+  .course-image-box {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    ::v-deep .el-image{
+      border-radius: 4px !important;
+    }
+    .course-image {
+      width: 100%;
+      height: 100%;
+    }
+    .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-title {
+    height: 44px;
+    // margin: 10px 0;
+    margin: 10px 0 10px 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-info { //图片下面的一行信息
+    // margin: 5px 15px;
+    // padding-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    line-height: 30px;
+    .course-info-user{
+      font-size: 14px;
+      color: #6E7B84;
+      width: 60%;
+      .course-info-author{
+
+      }
+      .course-info-studys {
+        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-info-score{
+      display:flex;
+      width: 40%;
+      ::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;
+            }
+          }
+      }
+      .course-score-value {
+        font-size: 14px;
+        color: #FA6400;
+        text-align: right;
+        margin-left: 5px;
+        font-family: "Arial";
+        // font-size: 30px;
+      }
+      .course-score-no {
+        text-align: right;
+        font-size: 14px;
+        color: #6B7C85;
+      }
+
     }
   }
 
+}
+//以下是多分辨率的控制，注意，只是一些样式的高度，宽度，大小控制，非大小控制不要在这里写
 @media screen and (max-width: 1366px){
-  .xcontent{
+  .xcontent2{
-    // width: 1000px;
+    width: 1100px;
-    // margin: 0px auto;
+    padding: 20px 5px;
   }
-  .index-course{
+  .xcontent2-minor{
-    // width: 25%;
+    width: 234px;
+  }
+  .portal-ranking{
+    padding: 30px 15px;
+  }
+  .course-card {
+    padding:20px;
+    margin-right: 20px;
+    .course-image-box {
+      width: 200px;
+      height: 114px;
     }
-  .course-index{
-    // width: 33.3333%;
   }
-  .portal-model-btn{width: 300px;}
-  .xpage-right{width: 300px;}
 }
 
 @media screen and (max-width: 1680px) and (min-width:1367px){
-  .xcontent{
+  .xcontent2{
-    // width: 1260px;
+    width: 1366px;
-    // margin: 0px auto;
+    padding: 30px 20px;
-    // width: 100%;
-    // margin: 0px 87px;
   }
-  .index-course{
+  .xcontent2-minor{
-    // width: 20%;
+    width: 300px;
-    // width: 33.3333%;
+  }
+  .portal-ranking{
+      padding: 30px 20px;
+  }
+  .course-card {
+    padding:25px;
+    margin-right: 25px;
+    .course-image-box {
+      width: 285px;
+      height: 160px;
     }
-  .course-index{
-    // width: 25%;
-    // width: 33.3333%;
   }
-  .portal-model-btn{width: 410px;}
-  .xpage-right{width: 410px;}
 }
 
 @media screen and (max-width: 1920px) and (min-width: 1681px){
-  .xcontent{
+  .xcontent2{
-    // width: 1520px;
+    width: 1640px;
-    // margin: 0px auto;
+    padding: 30px 26px;
-    // width: 100%;
-    // margin: 0px 87px;
   }
-  .index-course{
+  .xcontent2-minor{
-    // width: 16.6666666667%;
+    width: 400px;
-    width: 33.3333%;
+  }
+
+  .portal-ranking{
+      padding: 30px 30px;
+  }
+  .course-card {
+    padding:25px;
+    margin-right: 25px;
+    .course-image-box {
+      width: 320px;
+      height: 180px;
     }
-  .course-index{
-    // width: 20%;
-    width: 33.3333%;
   }
-  .portal-model-btn{width: 410px;}
-  .xpage-right{width: 410px;}
 }
 
 @media screen and (min-width: 1921px){
-  .xcontent{
+  .xcontent2{
-    // width: 1520px;
+    width: 1880px;
-    // margin: 0px auto;
+    padding: 30px 26px;
   }
-  .index-course{
+  .xcontent2-minor{
-    // width: 16.6666666667%;
+    width: 400px;
-    // width: 33.3333%;
   }
-  .course-index{
+
-    // width: 20%;
+  .portal-ranking{
-    // width: 33.3333%;
+      padding: 30px 30px;
   }
-  .portal-model-btn{width: 410px;}
+  .course-card {
-  .xpage-right{width: 410px;}
+    padding:25px;
+    margin-right: 25px;
+    .course-image-box {
+      width: 340px;
+      height: 191px;
+    }
+  }
+
 }

src/components/Portal/guideBox.vue

@@ -96,9 +96,12 @@
         },
         
         showImg(item) {
-           this.description = item.description;
           this.resonimg = [];
+          if(item){
+            this.description = item.description;
             this.resonimg = item.images;
+          }
+           
         //    this.swiper.update();
         },
         notYet() {

src/views/portal/article/Detail.vue

@@ -3,10 +3,9 @@
     <div class="article-banner">
     <portal-header current="article" :goSearch="3"></portal-header>
     </div>
-    <div class="portal-content xcontent" style="margin-top: 30px;">
+    <div>
-
+      <div class="xcontent2">
-      <div class="xrow" style="display: flex;justify-content: space-between;">
+         <div style="margin-right: 30px;" class="xcontent2-main">
-         <div style="flex: 1;" class="xcol content-div">
           <div  v-if="noData" >
           <!--文章详细内容-->
 
@@ -49,14 +48,17 @@
             <el-empty :image-size="200"></el-empty>
           </div>
          </div>
-         <div style="width: 410px;margin-left: 5px;">
+         <div class="xcontent2-minor">
-
           <div>
            <div id="articleAnking">
-            <el-button class="write-art" @click="openDialog" type="primary"><svg-icon icon-class="addArticle" style="margin-right: 20px;font-size: 26px;"></svg-icon>写文章</el-button>
+              <div class="portal-model-btn pointer" @click="openDialog">
-              <div class="portal-right-box art-bgimg" style="background-color:#fff;">
+                    <svg-icon style="margin-right: 10px;font-size: 24px;" icon-class="addArticle"></svg-icon>
-                <p class="portal-title-one" style="padding-bottom:12px" >贡献榜</p>
+                    写文章
-                 <ul>
+              </div>
+
+              <div class="portal-ranking ranking-bg">
+                <p class="ranking-title">贡献榜</p>
+                 <ul class="ranking-data">
                       <li v-for="(item, index) in ankingList" :key="index" style="margin-top:30px;line-height: 22px;cursor: pointer;">
                         <span class="portal-right-text orange-one" v-if="index==0" style="margin-right:94px">
                           <img src="/images/list-01.png" alt="">
@@ -192,10 +194,11 @@ export default {
       //console.log(el_anking.clientWidth,'clientWidth');
       //el_anking.wid
       let innerHeight = document.querySelector('#article-index').clientHeight
+      let outerWidth = el_anking.clientWidth;
       let outerHeight = document.documentElement.clientHeight
       let scrollTop = document.documentElement.scrollTop
          if(scrollTop > 400) {
-          document.querySelector('#articleAnking').style.cssText = "position: fixed;top: 0;width:242.5px";
+          document.querySelector('#articleAnking').style.cssText = "position: fixed;top: 0;width:"+outerWidth+"px";
         } else {
           document.querySelector('#articleAnking').style.cssText = "position: static";
         }

src/views/portal/article/Index.vue

@@ -4,22 +4,11 @@
       <portal-header current="article" @emitInput="emitInput"></portal-header>
     </div>
     <!--内容区域-->
-    <div class="xcontent portal-content">
+    <div class="">
-      <div class="xrow" style="display: flex;justify-content: space-between;">
+      <div class="xcontent2">
-         <div style="flex: 1;background-color: #fff;" class="xcol content-div">
+        <div class="xcontent2-main" style="margin-right: 30px;background-color: #fff;padding-top: 50px;">
           <div>
             <div style="padding:0px" class="left-div">
-            <div class="search-div">
-              <div>
-              <!-- <el-input  placeholder="请输入关键词搜索" clearable v-model="articleList.keyword" maxlength="20">
-                <el-button slot="append" icon="el-icon-search" @click="searchData()"></el-button>
-              </el-input> -->
-              <!-- <div class="tip">
-                热门搜索词：
-                <span v-for="(item, index) in searchRecords" :key="index" @click="useHotword(item)">{{ item.keyword }}</span>
-              </div> -->
-              </div>
-            </div>
               <div class="order-div">
                 <div class="quyer-tag">
                   <el-button type="text" class="order-class" @click="getData(2)" :class="{ actice: articleList.order == 2 }"> 最热 </el-button>
@@ -28,14 +17,13 @@
                 <span class="more"></span>
               </div>
               <div class="data-content" v-if="articleList.list.length > 0">
-              <div :span="24" v-for="(article, aidx) in articleList.list" :key="aidx" class="article-list">
+                <div v-for="(article, aidx) in articleList.list" :key="aidx" class="article-list">
                   <div class="article-info">
                     <!--title-->
                      <router-link  :to="'article/detail?id=' + article.id">
                        <div style="display: flex;justify-content: space-between;margin-bottom: 10px;">
                            <div class="article-title one-line-ellipsis" v-html="$keywordActiveShow(article.title,articleList.keyword)"></div>
                            <div class="article-info-date"><i style="font-size:14px" class="el-icon-time"></i> {{article.sysCreateTime}}</div>
-
                        </div>
                      </router-link>
                     <!--body-->
@@ -74,20 +62,22 @@
                 <span class="pag-text-msg" v-else-if="moreState == 3 && !isSeach">没有更多数据了</span>
                 <span class="pag-text-msg" v-else-if="isSeach">没有查询到相关内容</span>
               </div>
-            <div v-if="isSeach" style="height:382px">
+              <div v-if="isSeach" style="height:382px"></div>
-
             </div>
           </div>
         </div>
-         </div>
+        <div class="xcontent2-minor">
-         <div style="width: 410px;margin-left: 5px;">
-
           <div>
             <div id="articleAnking">
-            <el-button class="write-art" @click="openDialog" type="primary"><svg-icon icon-class="addArticle" style="margin-right: 20px;font-size: 26px;"></svg-icon>写文章</el-button>
+              <div>
-              <div class="portal-right-box art-bgimg" style="background-color:#fff;">
+                <div class="portal-model-btn pointer" @click="openDialog">
-                <p class="portal-title-one" style="padding-bottom:12px" >贡献榜</p>
+                      <svg-icon style="margin-right: 10px;font-size: 24px;" icon-class="addArticle"></svg-icon>
-                 <ul>
+                      写文章
+                </div>
+              </div>
+              <div class="portal-ranking ranking-bg">
+                <p class="ranking-title">贡献榜</p>
+                 <ul class="ranking-data">
                       <li v-for="(item, index) in ankingList" :key="index" style="margin-top:30px;line-height: 22px;cursor: pointer;">
                         <span class="portal-right-text orange-one" v-if="index==0" style="margin-right:94px">
                           <img src="/images/list-01.png" alt="">
@@ -119,12 +109,7 @@
          </div>
 
       </div>
-      <el-row :gutter="10">
 
-        <el-col :span="6" class="right-box" >
-
-        </el-col>
-      </el-row>
     </div>
     <el-dialog title="创建文章" :visible.sync="diagSync" :close-on-click-modal="false" width="900px" custom-class="g-dialog">
       <editItems v-if="diagSync" :jumpLimit="false" :editForm="{}" @success="saveSuccess"></editItems>
@@ -194,7 +179,10 @@ export default {
     // let el_anking = document.querySelector('#articleAnking');
     // this.ankingWidth=el_anking.clientWidth;
     //console.log(el_anking.clientWidth,'clientWidth');
+    if(this.$route.query){
       this.articleList.keyword = this.$route.query.keyword;
+    }
+
     if(this.articleList.keyword != '') {
      this.isSeach = true;
     }
@@ -243,6 +231,7 @@ export default {
       //el_anking.wid
       let innerHeight = document.querySelector('#article-list-content').clientHeight
       let outerHeight = document.documentElement.clientHeight
+      let outerWidth = el_anking.clientWidth;
       let scrollTop = document.documentElement.scrollTop
       if ((outerHeight + scrollTop + 350) >= innerHeight) {
         if(this.moreState == 1) {
@@ -265,7 +254,7 @@ export default {
       //   }
       // }
          if(scrollTop > 400) {
-          document.querySelector('#articleAnking').style.cssText = "position: fixed;top: 0;width:242.5px";
+          document.querySelector('#articleAnking').style.cssText = "position: fixed;top: 0;width:"+outerWidth+"px";
         } else {
           document.querySelector('#articleAnking').style.cssText = "position: static";
         }
@@ -409,7 +398,7 @@ export default {
 <style scoped lang="scss">
 .course-resources{
   margin-top: 26px;
-  width: 410px;
+  width:100%;
   img{
     width: 100%;
     height: 100%;

src/views/portal/case/Detail.vue

@@ -3,10 +3,10 @@
     <div class="case-banner">
       <portal-header current="case" :goSearch="2"></portal-header>
     </div>
-    <div class="portal-content xcontent" style="margin-top: 30px;">
+    <div class="">
-       <div class="xrow" style="display: flex;justify-content: space-between;" >
+       <div class="xcontent2">
-          <div style="flex: 1;" class="xcol content-div" id="content-div">
+          <div class="xcontent2-main" style="margin-right: 30px;" id="content-div">
-            <div :gutter="10" v-if="noData">
+            <div v-if="noData">
                 <div class="detail">
                   <div class="xpage-detail-crumbs">
                       <router-link to="/case"><span class="crumbs-first">案例列表</span></router-link>
@@ -96,12 +96,12 @@
               <el-empty :image-size="200"></el-empty>
             </div>
           </div>
-          <div style="width: 410px;margin-left: 5px;" :class="zoomShow?'':'fixd-box-show'">
+          <div :class="zoomShow?'':'xcontent2-minor'">
             <div>
             <div id="fixd-box">
-            <div class="ranking-card portal-right-box list-bg">
+            <div class="portal-ranking ranking-bg">
-              <p class="portal-title-one" style="padding-bottom:12px">好评榜</p>
+              <p class="ranking-title">好评榜</p>
-              <ul>
+              <ul class="ranking-data">
                   <li v-for="(item, index) in Positive" :key="index" class="title-line-ellipsis" style="cursor: pointer;margin-top:30px;line-height: 22px;">
                           <span class="portal-right-text blue-one" v-if="index==0">
                             <img src="/images/listblue01.png" alt="">
@@ -122,9 +122,9 @@
                   </li>
               </ul>
             </div>
-            <div style="margin-top:26px" class="ranking-card portal-right-box list-bg1">
+            <div style="margin-top:26px" class="portal-ranking ranking-bg1">
-              <p class="portal-title-one" style="padding-bottom:12px">人气榜</p>
+              <p class="ranking-title">人气榜</p>
-              <ul>
+              <ul class="ranking-data">
                 <li v-for="(item, index) in Popularity" :key="index" class="title-line-ellipsis" style="cursor: pointer;margin-top:30px;line-height: 22px;">
                         <span class="portal-right-text orange-one" v-if="index==0">
                           <img src="/images/list-01.png" alt="">

src/views/portal/case/Index.vue

@@ -4,29 +4,18 @@
       <portal-header current="case" @emitInput="emitInput"></portal-header>
     </div>
 
-    <div class="xcontent portal-content">
+    <div class="xcontent2">
-      <div style="flex: 1;" class="xcol content-div">
+      <div class="xcontent2-main" style="margin-right: 30px;">
-         <el-row>
+        <div>
-             <el-col :span="24">
             <el-card :body-style="{ padding: '0px' }" class="left-div">
               <el-row class="search-div">
-              <!-- <el-row>
-                <el-col :span="10" class="search-keyword">
-                  <el-input placeholder="请输入关键词搜索" v-model="keyWord" clearable><el-button slot="append" icon="el-icon-search" @click="search"></el-button></el-input>
-                  <div class="tip">热门搜索词：物联网 教师 辅导 绩效</div>
-                  <div class="tip" style="font-size: 14px;">
-                  热门搜索词：<span style="cursor:pointer;font-size:15px;margin-left: 10px;" v-for="(item,index) in searchRecords" :key="index" @click="useHotword(item)">{{item.keyword}}</span>
-                  </div>
-                </el-col>
-              </el-row> -->
                 <div class="searchbar" v-if="searchTags.length > 0">
                   <div style="line-height: 30px;">
                     <span class="item-title">搜索条件</span>
                     <el-tag closable v-for="(tag, tagIdx) in searchTags" :key="tagIdx" @close="tagsClose(tag,tagIdx)">{{ tag.value }}</el-tag>
                   </div>
                 </div>
-              <el-row class="search-item">
+                <div class="search-item">
-                <el-col :span="24">
                     <div style="margin-top:10px; display: flex;">
                       <div style="line-height: 25px;padding-right: 10px;">
                         <span class="item-title" style="padding-right: 5px;">组织领域</span>
@@ -35,16 +24,14 @@
                       <div style="flex:1;">
                         <el-radio-group v-model="queryCondition.orgDomain" size="mini" @change="search()">
                           <el-radio-button :label="null">全部</el-radio-button>
-
                           <el-radio-button v-for="item in domain" :key="item.code" :label="item.code"> {{ item.name}}</el-radio-button>
                         </el-radio-group>
                       </div>
                     </div>
-                </el-col>
+                </div>
-              </el-row>
                 <div class="search-div-collapse">
-                <el-row class="search-item">
+                  <div class="search-item">
-                  <el-col :span="24" >
+
                       <div style="margin-top:10px; display: flex;">
                         <div style="line-height: 25px;padding-right: 10px;">
                       <span class="item-title" style="padding-right: 5px;">专业分类</span>
@@ -59,8 +46,8 @@
                           </el-radio-group>
                        </div>
                       </div>
-                  </el-col>
+
-                </el-row>
+                  </div>
                 </div>
                 <div class="searBox" v-if="searchwd">
                    <el-button type="text"  id="closeSearchBtn" @click="closeSearch">
@@ -69,7 +56,7 @@
                   </el-button>
                 </div>
               </el-row>
-            <el-row style="height:10px;background-color:#f6f7fc;" >
+              <el-row style="height:30px;background-color:#f6f7fc;" >
               </el-row>
               <el-row class="order-div"  style="border-bottom:none">
                 <span class="quyer-tag">
@@ -131,15 +118,14 @@
               <div v-if="isSeach" style="height:382px">
               </div>
             </el-card>
-        </el-col>
-         </el-row>
         </div>
-       <div style="width: 410px;">
+      </div>
+       <div class="xcontent2-minor">
         <div>
            <div id="fixd-box">
-              <div class="ranking-card portal-right-box list-bg">
+              <div class="portal-ranking ranking-bg">
-                <p class="portal-title-one" style="padding-bottom:12px">好评榜</p>
+                <p class="ranking-title">好评榜</p>
-                <ul>
+                <ul class="ranking-data">
                   <li v-for="(item, index) in Positive" :key="index" class="title-line-ellipsis" style="cursor: pointer;margin-top:30px;line-height: 22px;">
                         <span class="portal-right-text blue-one" v-if="index==0">
                           <img src="/images/listblue01.png" alt="">
@@ -160,9 +146,9 @@
                    </li>
                 </ul>
               </div>
-              <div style="margin-top:26px" class="ranking-card portal-right-box list-bg1">
+              <div class="portal-ranking ranking-bg1" style="margin-top:26px" >
-                <p class="portal-title-one" style="padding-bottom:12px">人气榜</p>
+                <p class="ranking-title">人气榜</p>
-                <ul>
+                <ul class="ranking-data">
                     <li v-for="(item, index) in Popularity" :key="index" class="title-line-ellipsis" style="cursor: pointer;margin-top:30px;line-height: 22px;">
                         <span class="portal-right-text orange-one" v-if="index==0">
                           <img src="/images/list-01.png" alt="">
@@ -813,21 +799,7 @@ export default {
   overflow: hidden;
 
 }
-.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;
-  }
-}
 ::v-deep .title-line-ellipsis {
   // width: 100%;
   display: -webkit-box;

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="">
-      <div class="xrow" style="display: flex;justify-content: space-between;">
+      <div class="xcontent2">
-        <div style="flex: 1;margin-right:0px" class="xcol content-div">
+        <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,28 +71,29 @@
               </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="xcourse-list">
-            <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-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">
+                  <div class="course-image-box">
-                    <course-image height="196px" :course="cinfo"></course-image>
+                    <course-image :course="cinfo"></course-image>
                   </div>
-                  <div :title="cinfo.title" class="course-title two-line-ellipsis"  v-html="cinfo.name">
+                  <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-author">
+                    <div class="course-info-score">
-                  <div class="course-author-left">
+                      <div class="cor-praises" v-if="cinfo.source == 2">
-                     <span  v-if="cinfo.teacher">{{cinfo.teacher=='BOE教师'? '':cinfo.teacher}}</span>
+                        <interactBar :type="1" nodeWidth="20px" :data="cinfo" :courseExclusive="true" :comments="false" :praises="false" :shares="false" :views="false"></interactBar>
-                     <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>
                           <div v-if="cinfo.score">
                             <span class="course-score-value">{{toScore(cinfo.score)}}分</span>
@@ -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">
+              <div class="portal-ranking ranking-bg">
-                <p class="portal-title-one" style="padding-bottom:12px">好评榜</p>
+                <div class="ranking-title">好评榜</div>
-                <ul>
+                <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">
+              <div style="margin-top:26px" class="portal-ranking ranking-bg1">
-                <p class="portal-title-one" style="padding-bottom:12px">人气榜</p>
+                <div class="ranking-title">人气榜</div>
-                <ul>
+                <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">
+              <div style="margin-top:26px" class="portal-ranking ranking-bg2">
-                <p class="portal-title-one" style="padding-bottom:12px">热度榜</p>
+                <div class="ranking-title">热度榜</div>
-                <ul>
+                <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;
@@ -941,6 +942,7 @@ export default {
   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 {
+// .right-box {
-  .add-btn {
+//   .add-btn {
-    width: 100%;
+//     width: 100%;
-    padding: 15px 0;
+//     padding: 15px 0;
-  }
+//   }
-  .ranking-card {
+//   .ranking-card {
-    margin-top: 0px;
+//     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>

src/views/portal/qa/Answer.vue

@@ -3,9 +3,9 @@
     <div class="qa-banner">
       <portal-header current="qa" :goSearch="4"></portal-header>
     </div>
-    <div class="portal-content xcontent">
+    <div >
-      <div class="xrow" style="display: flex;justify-content: space-between;">
+      <div class="xcontent2">
-        <div style="flex: 1;" class="xcol content-div">
+        <div style="margin-right: 30px;" class="xcontent2-main">
           <div v-if="noData">
             <div class="qust-detail">
               <div class="xpage-detail-crumbs">
@@ -229,16 +229,16 @@
             <el-empty :image-size="200"></el-empty>
           </div>
         </div>
-        <div style="width: 410px;margin-left: 26px;">
+        <div class="xcontent2-minor">
 
             <div class="qa-ranking">
-                  <div class="portal-model-btn" @click="$refs.addQuestion.askQuestionDialog = true">
+                  <div class="portal-model-btn pointer" @click="$refs.addQuestion.askQuestionDialog = true">
                     <svg-icon style="margin-right: 0;font-size: 24px;" icon-class="question-mark"></svg-icon>
                     提问题
                   </div>
-                  <div class="portal-right-box list-bg">
+                  <div class="portal-ranking ranking-bg">
-                        <p class="portal-title-one" style="padding-bottom:12px">贡献榜</p>
+                        <p class="ranking-title">贡献榜</p>
-                        <ul>
+                        <ul class="ranking-data">
                           <li v-for="(item, index) in ankingList" :key="index" style="margin-top:30px;line-height: 22px;cursor: pointer;">
                             <span class="portal-right-text orange-one" v-if="index==0" style="margin-right:94px">
                               <img src="/images/list-01.png" alt="">

src/views/portal/qa/Index.vue

@@ -6,11 +6,11 @@
 
     <div class="portal-content">
 
-      <div  class="xrow" style="display: flex;justify-content: space-between;">
+      <div  class="xcontent2">
-         <div  style="flex: 1;" class="xcol content-div">
+        <div  class="xcontent2-main" style="margin-right: 30px;background-color: #fff;padding-top: 50px;">
-            <el-row>
+          <div>
-               <el-card :body-style="{ padding: '0px' }" class="left-div">
+            <div class="left-div">
-            <el-row class="order-div">
+              <div class="order-div">
                 <span class="quyer-tag">
                     <el-button type="text" class="order-class" @click="orderFieldData('answers')" :class="{ actice: styleControl == 2 }">
                     最热
@@ -29,7 +29,7 @@
                   </el-button>
                   <el-button type="text" @click="isResolveData(true)" class="order-class" :class="{ actice: queryConditions.isResolve===true }">已解决</el-button>
                 </span>
-            </el-row>
+              </div>
               <div class="data-content" v-if="qaList.length > 0">
                 <div :span="24" v-for="(qa, qaidx) in qaList" :key="qaidx" class="qa-list">
                   <div class="qa-info-box">
@@ -70,19 +70,19 @@
               <div v-if="isSeach" style="height:382px">
 
               </div>
-          </el-card>
-            </el-row>
             </div>
-         <div style="width: 410px;">
+          </div>
+         </div>
+         <div class="xcontent2-minor">
             <!-- <div> -->
               <div  style="padding:0" id="qa-fixd">
                   <div class="portal-model-btn pointer" @click="$refs.addQuestion.askQuestionDialog = true">
                     <svg-icon style="margin-right: 0;font-size: 24px;" icon-class="question-mark"></svg-icon>
                     提问题
                   </div>
-                    <div class="portal-right-box list-bg">
+                    <div class="portal-ranking ranking-bg">
-                        <p class="portal-title-one" style="padding-bottom:12px">贡献榜</p>
+                        <p class="ranking-title">贡献榜</p>
-                        <ul>
+                        <ul class="ranking-data">
                           <li v-for="(item, index) in ankingList" :key="index" style="margin-top:30px;line-height: 22px;cursor: pointer;">
                         <span class="portal-right-text orange-one" v-if="index==0" style="margin-right:94px">
                           <img src="/images/list-01.png" alt="">
@@ -113,7 +113,6 @@
 
          </div>
       </div>
-
       <addQuestion ref="addQuestion" @sure="getQaData(true)"></addQuestion>
     </div>
     <!-- :before-close="handleClose" -->