diff --git a/src/assets/styles/portal-index.scss b/src/assets/styles/portal-index.scss
index c0091a57..c4bf180d 100644
--- a/src/assets/styles/portal-index.scss
+++ b/src/assets/styles/portal-index.scss
@@ -3,6 +3,7 @@
 //首页版心内容区域
 .xindex-content {
   font-family: 'Noto Sans SC';
+  padding-top: 20px;
   margin: 26px auto;
 }
 .xindex-row{
@@ -461,7 +462,7 @@
   }
   //课程卡片样式
   .xindex-course{
-    width: 240px;
+    width: 255px;
     padding: 20px;
     margin-right: 20px;
     margin-bottom: 20px;
@@ -470,16 +471,14 @@
       bottom: 16px;
     }
     .course-image-box{
-     width: 200px;
-     height: 114px;
+     width: 220px;
+     height: 123px;
       ::v-deep .course-image{
         height: 100% !important;
       }
     }
   }
-  .xindex-ranking{
-    width: 300px;
-  }
+
     .boe-index{
        width: 235px;
        padding: 20px;
@@ -678,7 +677,7 @@
     width: 1366px;
   }
   .xindex-course{
-    width: 330px;
+    width: 320px;
     padding: 25px;
     margin-right: 20px;
     margin-bottom: 20px;
@@ -895,21 +894,21 @@
 
 @media screen and (max-width: 1920px) and (min-width: 1681px){
   .xindex-content{
-    width: 1640px;
+    width: 1690px;
   }
   .xindex-course{
-    width: 410px;
+    width: 400px;
     padding: 30px;
-    margin-right: 36px;
-    margin-bottom: 36px;
+    margin-right: 30px;
+    margin-bottom: 30px;
     border-radius: 8px;
     .cor-praises {
       right: 50px;
       bottom: 26px;
     }
     .course-image-box{
-     width: 350px;
-     height: 196x;
+     width: 340px;
+     height: 191x;
          ::v-deep .course-image{
              height: 100% !important;
          }
diff --git a/src/assets/styles/portal.scss b/src/assets/styles/portal.scss
index fa4cb486..651f27e8 100644
--- a/src/assets/styles/portal.scss
+++ b/src/assets/styles/portal.scss
@@ -252,10 +252,9 @@ body {margin: 0px;padding: 0px;}
 @media screen and (max-width: 1366px){
   .xcontent2{
     width: 1100px;
-    padding: 20px 5px;
   }
   .xcontent2-minor{
-    width: 234px;
+    width: 260px;
   }
   .portal-ranking{
     padding: 30px 15px;
@@ -273,10 +272,9 @@ body {margin: 0px;padding: 0px;}
 @media screen and (max-width: 1680px) and (min-width:1367px){
   .xcontent2{
     width: 1366px;
-    padding: 30px 20px;
   }
   .xcontent2-minor{
-    width: 300px;
+    width: 320px;
   }
   .portal-ranking{
       padding: 30px 20px;
@@ -293,8 +291,7 @@ body {margin: 0px;padding: 0px;}
 
 @media screen and (max-width: 1920px) and (min-width: 1681px){
   .xcontent2{
-    width: 1640px;
-    padding: 30px 26px;
+    width: 1690px;
   }
   .xcontent2-minor{
     width: 400px;
@@ -315,8 +312,7 @@ body {margin: 0px;padding: 0px;}
 
 @media screen and (min-width: 1921px){
   .xcontent2{
-    width: 1880px;
-    padding: 30px 26px;
+    width: 1900px;
   }
   .xcontent2-minor{
     width: 400px;
diff --git a/src/views/Index.vue b/src/views/Index.vue
index b9264f8b..0341f730 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-     <div class="course-banner">
-       <portal-header current="index" style="z-index:999; position: relative;" ></portal-header>
+    <div class="course-banner">
+      <portal-header current="index" style="z-index:999; position: relative;"></portal-header>
       <div id="container" style="z-index:99;">
         <swiper :options="swiperOption" ref="mySwiper" v-if="resonimg.length">
-          <swiper-slide  style="margin: 0 auto;" v-for="(item , idx ) in resonimg" :key="idx" class="swiper-slide games">
-            <div class="bannbox"  :style="{ 'background': `url(${fileBaseUrl + item.image}) no-repeat 100% / 100%`}" >
+          <swiper-slide style="margin: 0 auto;" v-for="(item , idx ) in resonimg" :key="idx" class="swiper-slide games">
+            <div class="bannbox" :style="{ 'background': `url(${fileBaseUrl + item.image}) no-repeat 100% / 100%`}">
             </div>
             <img class="banner-img" style=" margin: 0 auto;" :src=" fileBaseUrl + item.image" alt="">
           </swiper-slide>
@@ -18,7 +18,8 @@
         <!-- <img style="width:68px;height:68px" src="/images/Avatarman.png" alt=""> -->
         <p class="personal-name">{{userInfo.name}} {{userInfo.userNo}}</p>
         <p class="personal-info">{{userInfo.departName}}</p>
-        <div class="personal-box"><span>代办</span><span>3个待处理</span><img class="personal-box-img" src="/images/homeWu/agency.png" alt="" srcset=""></div>
+        <div class="personal-box"><span>代办</span><span>3个待处理</span><img class="personal-box-img"
+            src="/images/homeWu/agency.png" alt="" srcset=""></div>
         <ul class="personal-ul">
           <li>
             <span class="label">累计学习</span>
@@ -35,10 +36,10 @@
         </ul>
       </div>
     </div>
-    <div class="xindex-content" >
+    <div class="xindex-content">
       <!-- 推荐课程 -->
-      <div class="modules">
-        <div>
+      <div class="modules xcontent2">
+        <div class="xcontent2-main">
           <!--内容块-->
           <div class="modules-title">
             <span class="modules-text">推荐课程</span>
@@ -47,7 +48,7 @@
               <a :class="courseList.orderType == 1 ? 'current' : ''" @click="orderTypeFilter(1)">最新</a>
               <span @click="jumUX()" class="Uxtext" style=""> U选小课堂
                 <span class="uxicon">
-                    <svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
+                  <svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
                 </span>
               </span>
             </span>
@@ -58,177 +59,208 @@
           <div class="modules-list xrow" style="margin-right:0px">
             <!--一个固定内容-->
 
-              <div class="xindex-course">
-                <a href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course">
-                  <div class="xindex-course-image">
-                    <el-image class="course-image" :src="this.webBaseUrl+'/ad/index_course.png'" fit="fit"></el-image>
-                    <span class="course-type">录播课</span>
-                  </div>
+            <div class="xindex-course">
+              <a href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course">
+                <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>
                 <div title="高效谈判系列课" class="course-title portal-title-tow two-line-ellipsis">高效谈判系列课</div>
-                  <div class="course-author">
-                    <!-- <div class="course-author-left" > </div> -->
+                <div class="course-author">
+                  <!-- <div class="course-author-left" > </div> -->
+                  <div>
+                    <span class="study-num">2581人学习</span>
+                  </div>
+                  <div style="padding-left:15px">
                     <div>
-                      <span class="study-num">2581人学习</span>
-                    </div>
-                    <div style="padding-left:15px">
-                      <div >
-                        <span class="course-score-value">5.0</span>
-                      </div>
+                      <span class="course-score-value">5.0</span>
                     </div>
                   </div>
-                </a>
-              </div>
+                </div>
+              </a>
+            </div>
 
             <!--内容列表内容-->
-            <div  v-for="course in courseList.list" :key="course.id" class="xindex-course">
-                <a :href="toCourseDetail(course)">
-                  <div class="xindex-course-image">
-                    <course-image :course="course"></course-image>
-                    <span v-if="course.type == 20 || 10" class="course-type">录播课</span>
+            <div v-for="course in courseList.list" :key="course.id" class="xindex-course">
+              <a :href="toCourseDetail(course)">
+                <div class="xindex-course-image">
+                  <course-image :course="course"></course-image>
+                  <span v-if="course.type == 20 || 10" class="course-type">录播课</span>
+                </div>
+                <div :title="course.name" class="course-title portal-title-tow two-line-ellipsis">{{ course.name }}
+                </div>
+                <div class="course-author">
+                  <div class="course-author-left">
+                    {{ course.authorInfo.name }} <span class="study-num">{{ course.studys }}人学习</span>
                   </div>
-                  <div :title="course.name" class="course-title portal-title-tow two-line-ellipsis" >{{ course.name }}</div>
-                  <div class="course-author">
-                    <div class="course-author-left" >
-                      {{ course.authorInfo.name }} <span class="study-num">{{ course.studys }}人学习</span>
-                    </div>
-                    <div style="padding-left:15px">
-                      <div v-if="course.score">
-                        <span class="course-score-value">{{ toScore(course.score) }}</span>
-                      </div>
-                      <div v-else class="course-score-no">未评分</div>
+                  <div style="padding-left:15px">
+                    <div v-if="course.score">
+                      <span class="course-score-value">{{ toScore(course.score) }}</span>
                     </div>
+                    <div v-else class="course-score-no">未评分</div>
                   </div>
-                </a>
-                <div class="cor-praises"><interactBar :type="1" :data="course" :comments="false" :praises="false" :shares="false" :views="false"></interactBar></div>
+                </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 style="margin-top:60px">
-          <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;">
-                        <span class="portal-right-text blue-one">
-                          <img :src="getPic(index)" alt="">
-                        </span>
-                        <span class="portal-title-desc title-line-ellipsis" v-if="item.images == ''" style="font-size: 14px;">{{ item.name }}</span>
-                        <span class="portal-title-desc" v-else style="font-size: 14px;">
-                          <img style="width:96px;height:52px" :src="fileBaseUrl + item.images" alt=""/>
-                          <span class="portal-images-title two-line-ellipsis">{{ item.name }}</span>
-                        </span>
+        <div class="xcontent2-minor" style="margin-top:60px">
+          <div class="portal-ranking ranking-bg">
+            <p class="ranking-title">课程排行榜</p>
+            <ul class="course-index-list">
+              <li class="list-info" v-for="(item, index) in scorelist" :key="index"
+                style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
+                <span class="portal-right-text blue-one">
+                  <img :src="getPic(index)" alt="">
+                </span>
+                <span class="portal-title-desc title-line-ellipsis" v-if="item.images == ''"
+                  style="font-size: 14px;">{{ item.name }}</span>
+                <span class="portal-title-desc" v-else style="font-size: 14px;">
+                  <img style="width:96px;height:52px" :src="fileBaseUrl + item.images" alt="" />
+                  <span class="portal-images-title two-line-ellipsis">{{ item.name }}</span>
+                </span>
 
-                      <div class="list-active">
-                         <div class="list-content">
-                           <div class="list-img">
-                            <course-image :course="item"></course-image>
-                            <span v-if="item.type < 21" class="course-type">录播</span>
-                            <span v-if="item.type==30" class="course-type">线下课</span>
-                            <span v-if="item.type==40" class="course-type">学习项目</span>
-                          </div>
-                           <div class="list-text">
-                             <h6 class="two-line-ellipsis">{{item.name}}</h6>
-                             <span>{{item.publishTime}}</span>
-                           </div>
-                         </div>
-                         <div class="list-bottom">
-                          <interactBar :type="1" :data="item" :couseViews="true" :shares="false" :views="false"></interactBar>
-                         </div>
-                      </div>
-                   </li>
-                </ul>
+                <div class="list-active">
+                  <div class="list-content">
+                    <div class="list-img">
+                      <course-image :course="item"></course-image>
+                      <span v-if="item.type < 21" class="course-type">录播</span>
+                      <span v-if="item.type==30" class="course-type">线下课</span>
+                      <span v-if="item.type==40" class="course-type">学习项目</span>
+                    </div>
+                    <div class="list-text">
+                      <h6 class="two-line-ellipsis">{{item.name}}</h6>
+                      <span>{{item.publishTime}}</span>
+                    </div>
+                  </div>
+                  <div class="list-bottom">
+                    <interactBar :type="1" :data="item" :couseViews="true" :shares="false" :views="false"></interactBar>
+                  </div>
+                </div>
+              </li>
+            </ul>
           </div>
         </div>
       </div>
-        <!-- 推荐案例2版 -->
-      <div class="modules">
-        <div>
+      <!-- 推荐案例2版 -->
+      <div class="modules xcontent2">
+        <div class="xcontent2-main">
           <div class="modules-title"><span class="modules-text">推荐案例</span>
-          <span class="quyer-tag">
-          <a :class="caseList.orderType==2?'current':''" @click="changeCaseOrder(2)">最热</a>
-          <a :class="caseList.orderType==1?'current':''" @click="changeCaseOrder(1)">最新</a>
-          </span>
-          <span class="more"><router-link to="/case">查看更多</router-link></span>
+            <span class="quyer-tag">
+              <a :class="caseList.orderType==2?'current':''" @click="changeCaseOrder(2)">最热</a>
+              <a :class="caseList.orderType==1?'current':''" @click="changeCaseOrder(1)">最新</a>
+            </span>
+            <span class="more">
+              <router-link to="/case">查看更多</router-link>
+            </span>
           </div>
-            <div class="modules-list">
-              <ul class="case-box">
-                <li class="case-index boe-case-index" v-for="(ca,ind) in caseList.list" :key="ca.id">
-                   <div class="case-top"></div>
-                   <div class="case-conent">
-                     <p class="cast-time">
-                       <span class="time-one" v-if="caseList.orderType==2"><svg-icon style="margin-right: 0;font-size:16px;" icon-class="crown"></svg-icon>人气榜NO.{{ind+1}}</span>
-                       <span style="float: right;">{{ca.sysCreateTime.substring(0, 10)}}</span>
-                     </p>
-                     <p :title="ca.title" class="two-line-ellipsis case-title">
-                      {{ca.title}}
-                    </p>
-                     <p class="case-text three-line-ellipsis">{{ca.summary}}</p>
-                     <p class="case-info"><interactBar :type="3" :readonly="true" :data="ca" :shares="false" :views="false"></interactBar></p>
-                   </div>
-                   <div class="case-inter">
-                    <div><authorInfo :avatar="ca.authorInfo.avatar" :info="ca.authorInfo.orgInfo" :name="ca.authorInfo.name" :sex="ca.authorInfo.sex"></authorInfo></div>
-                    <div class="interact-bar-index"  style="font-size: 12px;color: #6E7B84;display: flex;line-height: 30px;"><interactBar :type="3" :readonly="true" :comments="false" :praises="false" :favorites="false" :data="ca" :shares="false" :views="true"></interactBar>人观看</div>
-                    <!-- -->
-                   </div>
-                </li>
-              </ul>
+          <div class="modules-list">
+            <ul class="case-box">
+              <li class="case-index boe-case-index" v-for="(ca,ind) in caseList.list" :key="ca.id">
+                <div class="case-top"></div>
+                <div class="case-conent">
+                  <p class="cast-time">
+                    <span class="time-one" v-if="caseList.orderType==2">
+                      <svg-icon style="margin-right: 0;font-size:16px;" icon-class="crown"></svg-icon>人气榜NO.{{ind+1}}
+                    </span>
+                    <span style="float: right;">{{ca.sysCreateTime.substring(0, 10)}}</span>
+                  </p>
+                  <p :title="ca.title" class="two-line-ellipsis case-title">
+                    {{ca.title}}
+                  </p>
+                  <p class="case-text three-line-ellipsis">{{ca.summary}}</p>
+                  <p class="case-info">
+                    <interactBar :type="3" :readonly="true" :data="ca" :shares="false" :views="false"></interactBar>
+                  </p>
+                </div>
+                <div class="case-inter">
+                  <div>
+                    <authorInfo :avatar="ca.authorInfo.avatar" :info="ca.authorInfo.orgInfo" :name="ca.authorInfo.name"
+                      :sex="ca.authorInfo.sex"></authorInfo>
+                  </div>
+                  <div class="interact-bar-index"
+                    style="font-size: 12px;color: #6E7B84;display: flex;line-height: 30px;">
+                    <interactBar :type="3" :readonly="true" :comments="false" :praises="false" :favorites="false"
+                      :data="ca" :shares="false" :views="true"></interactBar>人观看
+                  </div>
+                  <!-- -->
+                </div>
+              </li>
+            </ul>
           </div>
         </div>
-        <div>
-          <div style="margin-top:60px" class="ranking-card portal-right-box list-bg">
-                <p class="portal-title-one" style="padding-bottom:12px">案例排行榜</p>
-                <ul class="case-index-list">
-                    <li v-for="(item, index) in Popularity" :key="index" class="title-line-ellipsis" style="cursor: pointer;margin-top:30px;line-height: 22px;">
-                        <span class="portal-right-text orange-one">
-                          <img :src="getPic(index)" alt="">
-                        </span>
-                        <span class="portal-title-desc" style="font-size: 14px;">{{ item.title }}</span>
-                   </li>
-                </ul>
-              </div>
+        <div class="xcontent2-minor">
+          <div style="margin-top:60px" class="portal-ranking ranking-bg">
+            <p class="ranking-title">案例排行榜</p>
+            <ul class="case-index-list">
+              <li v-for="(item, index) in Popularity" :key="index" class="title-line-ellipsis"
+                style="cursor: pointer;margin-top:30px;line-height: 22px;">
+                <span class="portal-right-text orange-one">
+                  <img :src="getPic(index)" alt="">
+                </span>
+                <span class="portal-title-desc" style="font-size: 14px;">{{ item.title }}</span>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
       <!-- 推荐文章 -->
-      <div class="modules">
-        <div>
+      <div class="modules xcontent2">
+        <div class="xcontent2-main">
           <div class="modules-title">
             <span class="modules-text">推荐文章</span>
             <span class="quyer-tag">
-                <a :class="articleList.orderType == 2 ? 'current' : ''" @click="changeArticleOrder(2)">最热</a>
-                <a :class="articleList.orderType == 1 ? 'current' : ''" @click="changeArticleOrder(1)">最新</a>
+              <a :class="articleList.orderType == 2 ? 'current' : ''" @click="changeArticleOrder(2)">最热</a>
+              <a :class="articleList.orderType == 1 ? 'current' : ''" @click="changeArticleOrder(1)">最新</a>
+            </span>
+            <span class="more">
+              <router-link to="/article">查看更多</router-link>
             </span>
-            <span class="more"><router-link to="/article">查看更多</router-link></span>
           </div>
           <div class="modules-list">
             <div class="article-card boe-article-index" style="display: flex;">
               <!-- 首张 -->
               <div class="article-card-left" v-if="articleList && articleList.first && articleList.first.id">
                 <div class="article-card-box">
-                  <a :href="`${webBaseUrl}/article/detail?id=${articleList.first.id}`" style="font-weight: 700;font-size: 20px;">
+                  <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 class="article-info">
-                        <div class="article-info-title " style="margin-top:10px">
-                          <div class="one-line-ellipsis">
-                            <span style="font-weight: 600;font-size: 16px;word-break:break-all;color: #00253E;">{{ articleList.first.title }}</span>
-                          </div>
+                    <div class="article-info">
+                      <div class="article-info-title " style="margin-top:10px">
+                        <div class="one-line-ellipsis">
+                          <span
+                            style="font-weight: 600;font-size: 16px;word-break:break-all;color: #00253E;">{{ articleList.first.title }}</span>
                         </div>
-                        <div class="article-info-index-summary index-tive-line-ellipsis" style="font-weight: 400;margin-top:14px;word-break:break-all;">{{ articleList.first.summary }}</div>
                       </div>
+                      <div class="article-info-index-summary index-tive-line-ellipsis"
+                        style="font-weight: 400;margin-top:14px;word-break:break-all;">{{ articleList.first.summary }}
+                      </div>
+                    </div>
                   </a>
                   <div>
 
                   </div>
-                  <div class="article-info-time" style="font-size: 14px;color: #6E7B84;display:flex;justify-content: space-between;margin-top:16px">
-                    <span >{{ articleList.first && articleList.first.sysCreateTime && articleList.first.sysCreateTime.substring(0, 10) }}</span>
+                  <div class="article-info-time"
+                    style="font-size: 14px;color: #6E7B84;display:flex;justify-content: space-between;margin-top:16px">
+                    <span>{{ articleList.first && articleList.first.sysCreateTime && articleList.first.sysCreateTime.substring(0, 10) }}</span>
                     <span>查看详情</span>
                   </div>
                   <div class="article-other-info" style="margin-top:17px">
                     <div>
-                      <author-img :avatar="articleList.first.authorInfo.avatar" :aid="articleList.first.authorInfo.aid" :sex="articleList.first.authorInfo.sex"></author-img>
+                      <author-img :avatar="articleList.first.authorInfo.avatar" :aid="articleList.first.authorInfo.aid"
+                        :sex="articleList.first.authorInfo.sex"></author-img>
+                    </div>
+                    <div style="margin-top:5px">
+                      <interactBar :type="2" :readonly="true" :data="articleList.first" :views="false" :shares="false">
+                      </interactBar>
                     </div>
-                    <div style="margin-top:5px"><interactBar :type="2" :readonly="true" :data="articleList.first" :views="false" :shares="false"></interactBar></div>
                   </div>
                 </div>
               </div>
@@ -237,24 +269,28 @@
                 <div class="article-card-box" v-for="article in articleList.list" :key="article.id">
                   <div class="article-li">
                     <div class="article-img" v-if="article.coverurl != ''">
-                      <a :href="`${webBaseUrl}/article/detail?id=${article.id}`" style="font-weight: 700;font-size: 20px;">
+                      <a :href="`${webBaseUrl}/article/detail?id=${article.id}`"
+                        style="font-weight: 700;font-size: 20px;">
                         <el-image style="width:100%;height:100%" :src="fileBaseUrl + article.coverurl"></el-image>
                       </a>
                     </div>
-                      <div class="article-right">
-                        <a :href="`${webBaseUrl}/article/detail?id=${article.id}`" style="font-weight: 700;font-size: 20px;">
-                          <p class="article-info-title index-one-line-ellipsis">{{ article.title }}</p>
-                          <p class="article-info-summary two-line-ellipsis">{{ article.summary }}</p>
-                        </a>
-                        <div class="article-bottom">
-                          <div style="display:flex">
-                            <author-img :avatar="article.authorInfo.avatar" :aid="article.authorInfo.aid" :sex="article.authorInfo.sex"></author-img>
-                            <span style="color: #6E7B84;font-size: 14px;margin:6px 13px 0 10px;">{{article.authorInfo.name}}</span>
-                            <interactBar :type="2" :readonly="true" :data="article" :views="false"></interactBar>
-                          </div>
-                          <div><span class="article-info-time">{{ article.sysCreateTime.substring(0, 10) }}</span></div>
+                    <div class="article-right">
+                      <a :href="`${webBaseUrl}/article/detail?id=${article.id}`"
+                        style="font-weight: 700;font-size: 20px;">
+                        <p class="article-info-title index-one-line-ellipsis">{{ article.title }}</p>
+                        <p class="article-info-summary two-line-ellipsis">{{ article.summary }}</p>
+                      </a>
+                      <div class="article-bottom">
+                        <div style="display:flex">
+                          <author-img :avatar="article.authorInfo.avatar" :aid="article.authorInfo.aid"
+                            :sex="article.authorInfo.sex"></author-img>
+                          <span
+                            style="color: #6E7B84;font-size: 14px;margin:6px 13px 0 10px;">{{article.authorInfo.name}}</span>
+                          <interactBar :type="2" :readonly="true" :data="article" :views="false"></interactBar>
                         </div>
+                        <div><span class="article-info-time">{{ article.sysCreateTime.substring(0, 10) }}</span></div>
                       </div>
+                    </div>
                   </div>
 
 
@@ -267,22 +303,22 @@
                               <div class="two-line-ellipsis">
                                 <span style="font-weight: 600;font-size: 16px;word-break:break-all;color: #00253E;">{{ article.title }}</span>
                               </div> -->
-                              <!-- <div> -->
-                                <!-- <span class="article-info-time">{{ article.sysCreateTime.substring(0, 10) }}</span> -->
-                              <!-- </div> -->
-                            <!-- </div>
+                  <!-- <div> -->
+                  <!-- <span class="article-info-time">{{ article.sysCreateTime.substring(0, 10) }}</span> -->
+                  <!-- </div> -->
+                  <!-- </div>
                             <div>
                               <div class="two-line-ellipsis" style="font-weight: 400;font-size: 14px;color: #6E7B84;word-break:break-all;">{{ article.summary }}</div>
                             </div>
                           </a> -->
-                          <!-- <div class="article-other-info" style="margin-top:15px">
+                  <!-- <div class="article-other-info" style="margin-top:15px">
                             <div><authorInfo :avatar="article.authorInfo.avatar" :name="article.authorInfo.name" :sex="article.authorInfo.sex"></authorInfo></div>
                             <div><interactBar :type="2" :readonly="true" :data="article" :views="false"></interactBar></div>
                           </div>
                         </div> -->
-                        <!-- <div v-if="article.coverurl != ''" class="article-image"><el-image style="width:100%;height:100%" :src="fileBaseUrl + article.coverurl"></el-image></div>
+                  <!-- <div v-if="article.coverurl != ''" class="article-image"><el-image style="width:100%;height:100%" :src="fileBaseUrl + article.coverurl"></el-image></div>
                       </div> -->
-                    <!-- </div> -->
+                  <!-- </div> -->
                   <!-- </div> -->
                 </div>
               </div>
@@ -290,611 +326,689 @@
           </div>
         </div>
         <!--内容块-->
-       <div style="margin-top:60px">
-        <!-- 排行榜位置 -->
-        <div class="portal-right-box art-bgimg" style="background-color:#fff;" >
-                <p class="portal-title-one" style="padding-bottom:12px" >文章排行榜</p>
-                 <ul class="anking-index-list">
-                      <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">
-                          <img :src="getPic(index)" alt="">
-                        </span>
-                        <span class="portal-index-summary">{{ item.title }}</span>
-                      </li>
-                    </ul>
-              </div>
-       </div>
+        <div class="xcontent2-minor">
+          <div style="margin-top:60px" class="portal-ranking art-bgimg">
+          <!-- 排行榜位置 -->
+            <p class="ranking-title">文章排行榜</p>
+            <ul class="anking-index-list">
+              <li v-for="(item, index) in ankingList" :key="index" style="margin-top:30px;line-height: 22px;cursor: pointer;">
+                <span class="portal-right-text orange-one">
+                  <img :src="getPic(index)" alt="">
+                </span>
+                <span class="portal-index-summary">{{ item.title }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
       </div>
       <!-- 推荐问答 -->
-      <div class="modules">
-         <div>
-             <!--内容块-->
-           <div class="modules-title">
+      <div class="modules xcontent2">
+        <div class="xcontent2-main">
+          <!--内容块-->
+          <div class="modules-title">
             <span class="modules-text">推荐问答</span>
             <span class="quyer-tag">
-                <a :class="qaList.orderType == 'praises' ? 'current' : ''" @click="changeQaOrder('praises')">最热</a>
+              <a :class="qaList.orderType == 'praises' ? 'current' : ''" @click="changeQaOrder('praises')">最热</a>
               <a :class="qaList.orderType == '' ? 'current' : ''" @click="changeQaOrder('')">最新</a>
-
             </span>
-            <span class="more"><router-link to="/qa">查看更多</router-link></span>
+            <span class="more">
+              <router-link to="/qa">查看更多</router-link>
+            </span>
           </div>
-          <el-row class="modules-list">
+          <div class="modules-list">
             <!--内容列表内容-->
             <ul class="qa-box">
               <li class="qa-card boe-qa-index" v-for="qa in qaList.list" :key="qa.id">
-                  <p class="qa-top"><span>{{qa.views}}正在关注</span><span>{{ qa.sysCreateTime.substring(0, 10) }}</span></p>
-                  <div class="qa-center">
-                    <p class="one-line-ellipsis portal-index-title" style="color:#181818;">{{ qa.title }}</p>
-                    <p class="boe-qa-sum two-line-ellipsis" style="color:#6E7B84;">{{ qa.content }}</p>
-                    <p class="qa-views" @click="jumpRouter(qa)">查看详情</p>
-                  </div>
-                  <div class="qa-char">
-                    <author-img :avatar="qa.authorInfo.avatar" :aid="qa.authorInfo.aid" :sex="qa.authorInfo.sex"></author-img>
-                    <div>
-                      <p class="info-name">{{qa.authorInfo.name}}</p>
-                      <p class="info-bar"><interactBar :type="4" :readonly="true" :data="qa" :comments="false" :answers="true" :shares="false" :praises="false" :views="false"></interactBar></p>
-                    </div>
+                <p class="qa-top"><span>{{qa.views}}正在关注</span><span>{{ qa.sysCreateTime.substring(0, 10) }}</span></p>
+                <div class="qa-center">
+                  <p class="one-line-ellipsis portal-index-title" style="color:#181818;">{{ qa.title }}</p>
+                  <p class="boe-qa-sum two-line-ellipsis" style="color:#6E7B84;">{{ qa.content }}</p>
+                  <p class="qa-views" @click="jumpRouter(qa)">查看详情</p>
+                </div>
+                <div class="qa-char">
+                  <author-img :avatar="qa.authorInfo.avatar" :aid="qa.authorInfo.aid" :sex="qa.authorInfo.sex">
+                  </author-img>
+                  <div>
+                    <p class="info-name">{{qa.authorInfo.name}}</p>
+                    <p class="info-bar">
+                      <interactBar :type="4" :readonly="true" :data="qa" :comments="false" :answers="true"
+                        :shares="false" :praises="false" :views="false"></interactBar>
+                    </p>
                   </div>
+                </div>
               </li>
             </ul>
-          </el-row>
-         </div>
-         <div style="margin-top:74px">
+          </div>
+        </div>
+        <div  class="xcontent2-minor" style="margin-top:74px">
           <!-- 排行榜 -->
-          <div class="portal-right-box list-bg">
-                <p class="portal-title-one" style="padding-bottom:12px">问答排行榜</p>
-                <ul class="qa-index-qa">
-                  <li v-for="(item, index) in answersList" :key="index" style="margin-top:30px;line-height: 22px;cursor: pointer;">
-                    <span class="portal-right-text orange-one">
-                      <img :src="getPic(index)" alt="">
-                    </span>
-                     <span class="portal-index-summary">{{ item.title }}</span>
-                  </li>
-                </ul>
-            </div>
-         </div>
+          <div class="portal-ranking ranking-bg">
+            <p class="ranking-title">问答排行榜</p>
+            <ul class="qa-index-qa">
+              <li v-for="(item, index) in answersList" :key="index"
+                style="margin-top:30px;line-height: 22px;cursor: pointer;">
+                <span class="portal-right-text orange-one">
+                  <img :src="getPic(index)" alt="">
+                </span>
+                <span class="portal-index-summary">{{ item.title }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
       </div>
     </div>
-    <div><a href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course">&nbsp;&nbsp;&nbsp;</a></div>
+    <div><a href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course">&nbsp;&nbsp;&nbsp;</a>
+    </div>
     <portal-footer></portal-footer>
     <portalFloatTools></portalFloatTools>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
-import portalHeader from '@/components/PortalHeader.vue';
-import portalFooter from '@/components/PortalFooter.vue';
-import portalFloatTools from '@/components/PortalFloatTools.vue';
-import authorInfo from '@/components/Portal/authorInfo.vue';
-import apiCourse from '@/api/modules/coursePortal.js';
-import apiCase from '@/api/modules/cases.js';
-import apiArticle from '@/api/modules/article.js';
-import apiQa from '@/api/modules/qa.js';
-import apiUser from '@/api/system/user.js';
-import apiCoursePortal from '@/api/modules/coursePortal.js';
-import interactBar from '@/components/Portal/interactBar.vue';
-import ad from '@/components/Portal/adFloat.vue';
-import interactRowBar from '@/components/Portal/interactRowBar.vue';
-import courseImage from '@/components/Course/courseImage.vue';
-import articleImage from '@/components/Article/articleImage.vue';
-import { toScore,cutFullName} from '@/utils/tools.js';
-import { swiper, swiperSlide } from 'vue-awesome-swiper';
-import apiPlace from "@/api/phase2/place.js"
-import AuthorImg from '@/components/Portal/authorImg.vue';
-import apiStart from '@/api/phase2/stat.js'
-import apiIndex from '@/api/phase2/index.js'
+  import {
+    mapGetters
+  } from 'vuex';
+  import portalHeader from '@/components/PortalHeader.vue';
+  import portalFooter from '@/components/PortalFooter.vue';
+  import portalFloatTools from '@/components/PortalFloatTools.vue';
+  import authorInfo from '@/components/Portal/authorInfo.vue';
+  import apiCourse from '@/api/modules/coursePortal.js';
+  import apiCase from '@/api/modules/cases.js';
+  import apiArticle from '@/api/modules/article.js';
+  import apiQa from '@/api/modules/qa.js';
+  import apiUser from '@/api/system/user.js';
+  import apiCoursePortal from '@/api/modules/coursePortal.js';
+  import interactBar from '@/components/Portal/interactBar.vue';
+  import ad from '@/components/Portal/adFloat.vue';
+  import interactRowBar from '@/components/Portal/interactRowBar.vue';
+  import courseImage from '@/components/Course/courseImage.vue';
+  import articleImage from '@/components/Article/articleImage.vue';
+  import {
+    toScore,
+    cutFullName
+  } from '@/utils/tools.js';
+  import {
+    swiper,
+    swiperSlide
+  } from 'vue-awesome-swiper';
+  import apiPlace from "@/api/phase2/place.js"
+  import AuthorImg from '@/components/Portal/authorImg.vue';
+  import apiStart from '@/api/phase2/stat.js'
+  import apiIndex from '@/api/phase2/index.js'
 
-export default {
-  name: 'index',
-  components: {AuthorImg, portalHeader,ad, portalFooter, articleImage, portalFloatTools, authorInfo, interactRowBar, interactBar, courseImage },
-  computed: {
-    ...mapGetters(['userInfo'])
-  },
-  data() {
-    return {
-      userData:{},
-      userInfo:{},
-      ankingList:[],
-      answersList:[],
-      Popularity:[],
-      scorelist:[],
-       resonimg:[],
-      swiperOption: {
-    autoplay: {
-       disableOnInteraction: false ,
-       delay: 2000,
-       },
-   	 speed: 1000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
-   	 loop:true, //循环切换
-      peed: 300,//循环速度
-  	 scrollbar: '.swiper-scrollbar',
-
-   	pagination: {
-    	el: '.swiper-pagination',
-    	// type : 'progressbar', //分页器形状
-    	clickable :true, //点击分页器的指示点分页器会控制Swiper切换
-  	 },
-  	 navigation: {
-   	 nextEl: '.swiper-button-next',
-   	 prevEl: '.swiper-button-prev',
- 	  },
-   },
-
-      couname:'',
-      isNext: true,
-      pageIndex: 1,
-      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
-      toScore,
-      courseList: {
-        num: 12,
-        orderType: 2,
-        list: []
-      },
-      caseList: {
-        num: 3,
-        orderType: 2,
-        list: []
-      },
-      articleList: {
-        num: 4,
-        orderType: 2,
-        first: { id: '', authorInfo: {} },
-        list: []
-      },
-      qaList: {
-        num: 4,
-        orderType: 'praises',
-        list: []
-      }
-    };
-  },
-  mounted() {
-    this.userInfo = this.$store.getters.userInfo;
-    this.getCourseData(1);
-    this.getCaseData();
-    this.getArticleData();
-    this.getQaData();
-    this.couresreso();
-    this.getScoreList();
-    this.getPopularity();
-    this.getAnkingData();
-    this.getLevel();
-    this.getQaAnswers();
-  },
-  computed: {
-
-  swiper() {
-   return this.$refs.mySwiper.swiper
-  }
-
-  },
-  created(){
-   // undefined
-  //   this.$nextTick(() => {
-	// 	console.log(this.$refs.bannimg)  //获取到正确元素
-	// })
-  },
-  methods: {
-    getPic(index) {
-     return `/images/listblue0${index+1}.png`
+  export default {
+    name: 'index',
+    components: {
+      AuthorImg,
+      portalHeader,
+      ad,
+      portalFooter,
+      articleImage,
+      portalFloatTools,
+      authorInfo,
+      interactRowBar,
+      interactBar,
+      courseImage
     },
-    getLevel(){//获取经验值和等级
-          apiStart.getUserStatTotalInfo(this.userInfo.aid).then(res=>{
-            if(res.status == 200) {
-               this.userData = res.result;
-            }
-          });
+    computed: {
+      ...mapGetters(['userInfo'])
+    },
+    data() {
+      return {
+        userData: {},
+        userInfo: {},
+        ankingList: [],
+        answersList: [],
+        Popularity: [],
+        scorelist: [],
+        resonimg: [],
+        swiperOption: {
+          autoplay: {
+            disableOnInteraction: false,
+            delay: 2000,
+          },
+          speed: 1000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
+          loop: true, //循环切换
+          peed: 300, //循环速度
+          scrollbar: '.swiper-scrollbar',
+
+          pagination: {
+      	     el: '.swiper-pagination',
+            // type : 'progressbar', //分页器形状
+            clickable: true, //点击分页器的指示点分页器会控制Swiper切换
+          },
+          navigation: {
+   	        nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev',
+          },
         },
-    getQaAnswers() {
-      apiIndex.qaAnswers(10).then(res=>{
-        if (res.status == 200) {
-          this.answersList = res.result;
-        }
-      })
 
-    },
-    getAnkingData() {//  文章排行榜
-      apiIndex.articleViews(7).then(res => {
-        if (res.status == 200) {
-          this.ankingList = res.result;
+        couname: '',
+        isNext: true,
+        pageIndex: 1,
+        fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
+        toScore,
+        courseList: {
+          num: 12,
+          orderType: 2,
+          list: []
+        },
+        caseList: {
+          num: 3,
+          orderType: 2,
+          list: []
+        },
+        articleList: {
+          num: 4,
+          orderType: 2,
+          first: {
+            id: '',
+            authorInfo: {}
+          },
+          list: []
+        },
+        qaList: {
+          num: 4,
+          orderType: 'praises',
+          list: []
         }
-      });
-    },
-    getPopularity() {//案例排行榜
-      apiCase.queryPraises(10).then(res => {
-        if (res.status == 200) {
-          this.Popularity = res.result;
-          // console.log(this.Popularity)
-        }
-      });
-    },
-    getScoreList() {//课程排行榜
-      apiCourse.scorelist(10).then(res => {
-        if (res.status == 200) {
-          res.result.forEach(item=>{
-            if(item.publishTime != '') {
-             let time = item.publishTime.split('-');
-             item.publishTime = `${time[0]}年${time[1]}月${time[2]}日`
-            }
-          })
-          this.scorelist = res.result;
-        }
-      });
-    },
-    // bgfun(){
-    //  console.log(this.$refs.bannimg[0]);
-    //  this.$nextTick(() => {
-		// 		console.log(this.$refs.bannimg[0])
-		// 	})
-    // },
-     couresreso(){
-      let key = 'index';
-      apiPlace.detail(key).then(res=>{
-        let lmj =  JSON.parse(res.result.content)
-        this.resonimg = lmj
-        // console.log(this.resonimg)
-      })
-    },
-    jumUX(){
-     window.open('https://m.qingxuetang.com/x/?appId=qxtcorp306130','_blank');
-    },
-    toCourseDetail(item) {
-      if (item.type == 10) {
-        return this.webBaseUrl + '/course/micro?id=' + item.id;
-      } else if (item.type == 20) {
-        return this.webBaseUrl + '/course/detail?id=' + item.id;
-      }
-      return '';
-    },
-    orderTypeFilter(val) {
-      this.courseList.orderType = val;
-      this.pageIndex = 1;
-      this.getCourseData();
-    },
-    nextPage() {
-      this.pageIndex += 1;
-      if (this.isNext) {
-        this.getCourseData(this.pageIndex);
-      }
-    },
-    getCourseData(pageIndex) {
-      this.isNext = false;
-      let { orderType, num } = this.courseList;
-      let course = {
-        pageSize: 5,
-        device:1,
-        orderField: orderType == 1 ? '' : 'studys',
-        orderAsc: false,
-        topOrder:true,
-        pageIndex: pageIndex
       };
-
-      apiCoursePortal.pageList(course).then(res => {
-        if (res.status == 200 && res.result.list.length > 0) {
-          let courseIds = [];
-          res.result.list.forEach(item => {
-            item.authorInfo = { aid: '', name: '', orgInfo: '', avatar: '', code: '' ,sex:null};
-            courseIds.push(item.id);
-          });
-          this.loadCouserTeacher(res.result.list, courseIds);
-          this.courseList.list=res.result.list;
-          this.couname = res.result.list.name;
-          if(res.result.count - pageIndex * num < 8) {
-            this.pageIndex = 0;
-          }
-          this.isNext = true;
-          // }
-        } else {
-          console.log('加载课程信息失败:' + res.error);
-        }
-
-      });
-
-
-      // apiCourse.list({orderType,num,device:1}).then(res => {
-      //     if(res.status==200){
-      //       if(res.result.length>0){
-      //         let courseIds=[];
-      //         res.result.forEach(item=>{
-      //           item.authorInfo={aid:'',name:'',orgInfo:'',avatar:'',code:''};
-      //           courseIds.push(item.id);
-      //         })
-      //         this.loadCouserTeacher(res.result,courseIds);
-      //         this.courseList.list=res.result;
-      //       }
-      //     }else{
-      //       console.log('加载课程信息失败:'+res.error);
-      //     }
-      //   })
     },
-    changeCaseOrder(val) {
-      this.caseList.orderType = val;
+    mounted() {
+      this.userInfo = this.$store.getters.userInfo;
+      this.getCourseData(1);
       this.getCaseData();
-    },
-    getCaseData() {
-      apiIndex.cases(this.caseList.orderType).then(res => {
-        if (res.status == 200) {
-          if (res.result.length > 0) {
-            let userIds = [];
-            res.result.forEach(item => {
-              item.authorInfo = { aid: '', name: '', orgInfo: '', avatar: '', code: '',sex:null };
-
-              if (item.authorId && item.authorId != '') {
-                userIds.push(item.authorId);
-              }
-            });
-            this.caseList.list = res.result;
-            this.loadCaseAuthorInfo(res.result, userIds);
-          }
-          // this.caseList.list = res.result;
-        } else {
-          console.log('加载案例错误：' + res.error);
-        }
-      });
-    },
-    loadCaseAuthorInfo(list, ids) {
-      //加载作者信息，头像，机构信息
-      if (ids.length == 0) {
-        return;
-      }
-      const noReapetIds = [...new Set(ids)];
-      apiUser.getByIds(ids).then(res => {
-        if (res.status == 200) {
-          list.forEach((item, index) => {
-            res.result.some(author => {
-              if (author.aid == item.authorId) {
-                author.orgInfo=cutFullName(author.orgInfo,1);
-                item.authorInfo = author;
-
-                return true;
-              } else {
-                return false;
-              }
-            });
-          });
-        } else {
-          console.log('加载用户信息失败:' + res.error);
-          //this.$message.error(res.message);
-        }
-      });
-    },
-    getArticleData() {
-      let $this = this;
-      this.articleList.list = [];
-      apiIndex.articlelist(this.articleList.orderType).then(res => {
-        if (res.status == 200) {
-          if (res.result.length > 0) {
-            let userIds = [];
-            res.result.forEach((item, idx) => {
-              item.authorInfo = { aid: '', name: '', orgInfo: '', avatar: '', code: '' ,sex:null,};
-              userIds.push(item.sysCreateAid);
-              if (idx == 0) {
-                $this.articleList.first = item;
-              } else {
-                $this.articleList.list.push(item);
-              }
-            });
-            console.log(res.result,'res.result');
-            this.loadAuthorInfo(res.result, userIds);
-          }
-        } else {
-          console.log('加载文章错误：' + res.error);
-        }
-      });
-    },
-    changeArticleOrder(val) {
-      this.articleList.orderType = val;
       this.getArticleData();
-    },
-    getQaData() {
-      let params = {
-        pageSize: this.qaList.num,
-        orderAsc: false,
-        orderField: this.qaList.orderType
-      };
-      // if (this.qaList.orderType == 2) {
-      //   params.orderField = 'praises';
-      // }
-      apiQa.indexList(params).then(res => {
-        if (res.status == 200) {
-          if (res.result.length > 0) {
-            let userIds = [];
-            res.result.forEach(item => {
-              item.authorInfo = { aid: '', name: '', orgInfo: '', avatar: '', code: '',sex:null, };
-              userIds.push(item.sysCreateAid);
-            });
-            this.qaList.list = res.result;
-            this.loadAuthorInfo(res.result, userIds);
-          }
-        } else {
-          console.log('加载问答错误：' + res.error);
-        }
-        //console.log(res)
-      });
-    },
-    changeQaOrder(val) {
-      this.qaList.orderType = val;
       this.getQaData();
+      this.couresreso();
+      this.getScoreList();
+      this.getPopularity();
+      this.getAnkingData();
+      this.getLevel();
+      this.getQaAnswers();
     },
-    loadCouserTeacher(list, ids) {
-      let that = this;
-      // 先查课程关联教师iD
-      apiCourse.getTeacherByCourseIDs(ids).then(cres => {
-        if (cres.status == 200) {
-          let userIds = [];
-          list.forEach((item, index) => {
-            cres.result.some(courseTeahcer => {
-              if (courseTeahcer.courseId == item.id) {
-                if (courseTeahcer.teacherIds) {
-                  userIds.push(courseTeahcer.teacherIds[0]);
-                  item.authorInfo.aid = courseTeahcer.teacherIds[0];
-                  item.authorInfo.name = courseTeahcer.names[0];
-                  if(item.authorInfo.name=='BOE教师'){
-                    item.authorInfo.name='';
-                  }
-                }
-                return true;
-              } else {
-                return false;
-              }
-            });
-          });
-          //that.loadCourseAuthorInfo(list, userIds);
-        }
-      });
-    },
-    loadCourseAuthorInfo(list, ids) {
-      //加载作者信息，头像，机构信息
-      if (ids.length == 0) {
-        return;
-      }
-      const noReapetIds = [...new Set(ids)];
-      apiUser.getByIds(ids).then(res => {
-        if (res.status == 200) {
-          list.forEach((item, index) => {
-            res.result.some(author => {
-              if (author.aid == item.authorInfo.aid) {
-                item.authorInfo = author;
+    computed: {
 
-                return true;
-              } else {
-                return false;
-              }
-            });
-          });
-        } else {
-          console.log('加载用户信息失败:' + res.error);
-        }
-      });
-    },
-    loadAuthorInfo(list, ids) {
-      //加载作者信息，头像，机构信息
-      if (ids.length == 0) {
-        return;
+      swiper() {
+        return this.$refs.mySwiper.swiper
       }
-      const noReapetIds = [...new Set(ids)];
-      apiUser.getByIds(ids).then(res => {
-        if (res.status == 200) {
-          list.forEach((item, index) => {
-            res.result.some(author => {
-              if (author.aid == item.sysCreateAid) {
-                item.authorInfo = author;
-                return true;
-              } else {
-                return false;
-              }
-            });
-          });
-        } else {
-          console.log('加载用户信息失败:' + res.error);
-        }
-      });
+
     },
-    jumpRouter(item) {
-      this.$router.push({ path: '/qa/answer', query: { id: item.id } });
+    created() {
+      // undefined
+      //   this.$nextTick(() => {
+      // 	console.log(this.$refs.bannimg)  //获取到正确元素
+      // })
+    },
+    methods: {
+      getPic(index) {
+        return `/images/listblue0${index+1}.png`
+      },
+      getLevel() { //获取经验值和等级
+        apiStart.getUserStatTotalInfo(this.userInfo.aid).then(res => {
+          if (res.status == 200) {
+            this.userData = res.result;
+          }
+        });
+      },
+      getQaAnswers() {
+        apiIndex.qaAnswers(10).then(res => {
+          if (res.status == 200) {
+            this.answersList = res.result;
+          }
+        })
+
+      },
+      getAnkingData() { //  文章排行榜
+        apiIndex.articleViews(7).then(res => {
+          if (res.status == 200) {
+            this.ankingList = res.result;
+          }
+        });
+      },
+      getPopularity() { //案例排行榜
+        apiCase.queryPraises(10).then(res => {
+          if (res.status == 200) {
+            this.Popularity = res.result;
+            // console.log(this.Popularity)
+          }
+        });
+      },
+      getScoreList() { //课程排行榜
+        apiCourse.scorelist(10).then(res => {
+          if (res.status == 200) {
+            res.result.forEach(item => {
+              if (item.publishTime != '') {
+                let time = item.publishTime.split('-');
+                item.publishTime = `${time[0]}年${time[1]}月${time[2]}日`
+              }
+            })
+            this.scorelist = res.result;
+          }
+        });
+      },
+      // bgfun(){
+      //  console.log(this.$refs.bannimg[0]);
+      //  this.$nextTick(() => {
+      // 		console.log(this.$refs.bannimg[0])
+      // 	})
+      // },
+      couresreso() {
+        let key = 'index';
+        apiPlace.detail(key).then(res => {
+          let lmj = JSON.parse(res.result.content)
+          this.resonimg = lmj
+          // console.log(this.resonimg)
+        })
+      },
+      jumUX() {
+        window.open('https://m.qingxuetang.com/x/?appId=qxtcorp306130', '_blank');
+      },
+      toCourseDetail(item) {
+        if (item.type == 10) {
+          return this.webBaseUrl + '/course/micro?id=' + item.id;
+        } else if (item.type == 20) {
+          return this.webBaseUrl + '/course/detail?id=' + item.id;
+        }
+        return '';
+      },
+      orderTypeFilter(val) {
+        this.courseList.orderType = val;
+        this.pageIndex = 1;
+        this.getCourseData();
+      },
+      nextPage() {
+        this.pageIndex += 1;
+        if (this.isNext) {
+          this.getCourseData(this.pageIndex);
+        }
+      },
+      getCourseData(pageIndex) {
+        this.isNext = false;
+        let {
+          orderType,
+          num
+        } = this.courseList;
+        let course = {
+          pageSize: 5,
+          device: 1,
+          orderField: orderType == 1 ? '' : 'studys',
+          orderAsc: false,
+          topOrder: true,
+          pageIndex: pageIndex
+        };
+
+        apiCoursePortal.pageList(course).then(res => {
+          if (res.status == 200 && res.result.list.length > 0) {
+            let courseIds = [];
+            res.result.list.forEach(item => {
+              item.authorInfo = {
+                aid: '',
+                name: '',
+                orgInfo: '',
+                avatar: '',
+                code: '',
+                sex: null
+              };
+              courseIds.push(item.id);
+            });
+            this.loadCouserTeacher(res.result.list, courseIds);
+            this.courseList.list = res.result.list;
+            this.couname = res.result.list.name;
+            if (res.result.count - pageIndex * num < 8) {
+              this.pageIndex = 0;
+            }
+            this.isNext = true;
+            // }
+          } else {
+            console.log('加载课程信息失败:' + res.error);
+          }
+
+        });
+
+
+        // apiCourse.list({orderType,num,device:1}).then(res => {
+        //     if(res.status==200){
+        //       if(res.result.length>0){
+        //         let courseIds=[];
+        //         res.result.forEach(item=>{
+        //           item.authorInfo={aid:'',name:'',orgInfo:'',avatar:'',code:''};
+        //           courseIds.push(item.id);
+        //         })
+        //         this.loadCouserTeacher(res.result,courseIds);
+        //         this.courseList.list=res.result;
+        //       }
+        //     }else{
+        //       console.log('加载课程信息失败:'+res.error);
+        //     }
+        //   })
+      },
+      changeCaseOrder(val) {
+        this.caseList.orderType = val;
+        this.getCaseData();
+      },
+      getCaseData() {
+        apiIndex.cases(this.caseList.orderType).then(res => {
+          if (res.status == 200) {
+            if (res.result.length > 0) {
+              let userIds = [];
+              res.result.forEach(item => {
+                item.authorInfo = {
+                  aid: '',
+                  name: '',
+                  orgInfo: '',
+                  avatar: '',
+                  code: '',
+                  sex: null
+                };
+
+                if (item.authorId && item.authorId != '') {
+                  userIds.push(item.authorId);
+                }
+              });
+              this.caseList.list = res.result;
+              this.loadCaseAuthorInfo(res.result, userIds);
+            }
+            // this.caseList.list = res.result;
+          } else {
+            console.log('加载案例错误：' + res.error);
+          }
+        });
+      },
+      loadCaseAuthorInfo(list, ids) {
+        //加载作者信息，头像，机构信息
+        if (ids.length == 0) {
+          return;
+        }
+        const noReapetIds = [...new Set(ids)];
+        apiUser.getByIds(ids).then(res => {
+          if (res.status == 200) {
+            list.forEach((item, index) => {
+              res.result.some(author => {
+                if (author.aid == item.authorId) {
+                  author.orgInfo = cutFullName(author.orgInfo, 1);
+                  item.authorInfo = author;
+
+                  return true;
+                } else {
+                  return false;
+                }
+              });
+            });
+          } else {
+            console.log('加载用户信息失败:' + res.error);
+            //this.$message.error(res.message);
+          }
+        });
+      },
+      getArticleData() {
+        let $this = this;
+        this.articleList.list = [];
+        apiIndex.articlelist(this.articleList.orderType).then(res => {
+          if (res.status == 200) {
+            if (res.result.length > 0) {
+              let userIds = [];
+              res.result.forEach((item, idx) => {
+                item.authorInfo = {
+                  aid: '',
+                  name: '',
+                  orgInfo: '',
+                  avatar: '',
+                  code: '',
+                  sex: null,
+                };
+                userIds.push(item.sysCreateAid);
+                if (idx == 0) {
+                  $this.articleList.first = item;
+                } else {
+                  $this.articleList.list.push(item);
+                }
+              });
+              console.log(res.result, 'res.result');
+              this.loadAuthorInfo(res.result, userIds);
+            }
+          } else {
+            console.log('加载文章错误：' + res.error);
+          }
+        });
+      },
+      changeArticleOrder(val) {
+        this.articleList.orderType = val;
+        this.getArticleData();
+      },
+      getQaData() {
+        let params = {
+          pageSize: this.qaList.num,
+          orderAsc: false,
+          orderField: this.qaList.orderType
+        };
+        // if (this.qaList.orderType == 2) {
+        //   params.orderField = 'praises';
+        // }
+        apiQa.indexList(params).then(res => {
+          if (res.status == 200) {
+            if (res.result.length > 0) {
+              let userIds = [];
+              res.result.forEach(item => {
+                item.authorInfo = {
+                  aid: '',
+                  name: '',
+                  orgInfo: '',
+                  avatar: '',
+                  code: '',
+                  sex: null,
+                };
+                userIds.push(item.sysCreateAid);
+              });
+              this.qaList.list = res.result;
+              this.loadAuthorInfo(res.result, userIds);
+            }
+          } else {
+            console.log('加载问答错误：' + res.error);
+          }
+          //console.log(res)
+        });
+      },
+      changeQaOrder(val) {
+        this.qaList.orderType = val;
+        this.getQaData();
+      },
+      loadCouserTeacher(list, ids) {
+        let that = this;
+        // 先查课程关联教师iD
+        apiCourse.getTeacherByCourseIDs(ids).then(cres => {
+          if (cres.status == 200) {
+            let userIds = [];
+            list.forEach((item, index) => {
+              cres.result.some(courseTeahcer => {
+                if (courseTeahcer.courseId == item.id) {
+                  if (courseTeahcer.teacherIds) {
+                    userIds.push(courseTeahcer.teacherIds[0]);
+                    item.authorInfo.aid = courseTeahcer.teacherIds[0];
+                    item.authorInfo.name = courseTeahcer.names[0];
+                    if (item.authorInfo.name == 'BOE教师') {
+                      item.authorInfo.name = '';
+                    }
+                  }
+                  return true;
+                } else {
+                  return false;
+                }
+              });
+            });
+            //that.loadCourseAuthorInfo(list, userIds);
+          }
+        });
+      },
+      loadCourseAuthorInfo(list, ids) {
+        //加载作者信息，头像，机构信息
+        if (ids.length == 0) {
+          return;
+        }
+        const noReapetIds = [...new Set(ids)];
+        apiUser.getByIds(ids).then(res => {
+          if (res.status == 200) {
+            list.forEach((item, index) => {
+              res.result.some(author => {
+                if (author.aid == item.authorInfo.aid) {
+                  item.authorInfo = author;
+
+                  return true;
+                } else {
+                  return false;
+                }
+              });
+            });
+          } else {
+            console.log('加载用户信息失败:' + res.error);
+          }
+        });
+      },
+      loadAuthorInfo(list, ids) {
+        //加载作者信息，头像，机构信息
+        if (ids.length == 0) {
+          return;
+        }
+        const noReapetIds = [...new Set(ids)];
+        apiUser.getByIds(ids).then(res => {
+          if (res.status == 200) {
+            list.forEach((item, index) => {
+              res.result.some(author => {
+                if (author.aid == item.sysCreateAid) {
+                  item.authorInfo = author;
+                  return true;
+                } else {
+                  return false;
+                }
+              });
+            });
+          } else {
+            console.log('加载用户信息失败:' + res.error);
+          }
+        });
+      },
+      jumpRouter(item) {
+        this.$router.push({
+          path: '/qa/answer',
+          query: {
+            id: item.id
+          }
+        });
+      }
     }
   }
-  }
 </script>
 
 <style scoped lang="scss">
+  .article-li {
+    display: flex;
+    width: 100%;
 
-    .article-li{
-      display: flex;
-      width: 100%;
-      .article-img{
+    .article-img {
+      // width: 252px;
+      // height: 142px;
+      border-radius: 4px;
+
+      // margin-right: 20px;
+      img {
         // width: 252px;
         // height: 142px;
         border-radius: 4px;
-        // margin-right: 20px;
-        img{
-          // width: 252px;
-          // height: 142px;
-          border-radius: 4px;
-        }
       }
-      .article-right{
-        width: 100%;
-        .article-info-title{
-          font-size: 16px;
-          font-weight: 600;
-          color: #00253E;
-          margin-bottom: 9px;
-          // 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: 32px;
-            // height: 32px;
-          }
-        }
-        .article-info-time{
-          font-size: 12px;
-          font-weight: 400;
-          color: #6E7B84;
-        }
-      }
-
     }
 
-//   ::v-deep .course-image-box :hover .el-image{
-//         // transition: all 0.5s;
-//         z-index: 999;
-//         position: absolute;
-//         top: -50px;
-//         left: -35px;
-//         width: 420px !important;
-//         height: 236px !important;
+    .article-right {
+      width: 100%;
 
-// }
-  .course-ran-bg{
+      .article-info-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #00253E;
+        margin-bottom: 9px;
+        // 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: 32px;
+          // height: 32px;
+        }
+      }
+
+      .article-info-time {
+        font-size: 12px;
+        font-weight: 400;
+        color: #6E7B84;
+      }
+    }
+
+  }
+
+  //   ::v-deep .course-image-box :hover .el-image{
+  //         // transition: all 0.5s;
+  //         z-index: 999;
+  //         position: absolute;
+  //         top: -50px;
+  //         left: -35px;
+  //         width: 420px !important;
+  //         height: 236px !important;
+
+  // }
+  .course-ran-bg {
     background: linear-gradient(180deg, #d7eaff 1%, #FAFAFA 24%);
   }
-  .personal-panel{
+
+  .personal-panel {
     position: absolute;
     right: 172px;
-    top:105px;
+    top: 105px;
     width: 356px;
     height: 370px;
-    background: rgba(0,0,0,0.39);
+    background: rgba(0, 0, 0, 0.39);
     border-radius: 8px;
     z-index: 999;
     backdrop-filter: blur(10px);
     padding: 38px 47px 31px 32px;
     text-align: center;
     color: #fff;
-    .personal-img{
+
+    .personal-img {
       width: 68px;
       height: 68px;
       margin: 0 auto;
-     ::v-deep .el-avatar{
+
+      ::v-deep .el-avatar {
         width: 68px;
         height: 68px;
       }
     }
-    .personal-name{
+
+    .personal-name {
       font-weight: 600;
       font-size: 18px;
       margin-top: 12px;
     }
-    .personal-info{
+
+    .personal-info {
       font-size: 14px;
       color: #C1C1C1;
       margin-top: 10px;
     }
-    .personal-box{
+
+    .personal-box {
       width: 240px;
       height: 60px;
-      background: rgba(0,0,0,0.39);
+      background: rgba(0, 0, 0, 0.39);
       border-radius: 8px;
       margin-left: 16px;
       margin-top: 20px;
@@ -903,792 +1017,925 @@ export default {
       display: flex;
       justify-content: space-between;
       position: relative;
-      .personal-box-img{
+
+      .personal-box-img {
         position: absolute;
         width: 24px;
         height: 24px;
-        left:10px;
-        top:-8px;
+        left: 10px;
+        top: -8px;
 
       }
     }
-    .personal-ul{
+
+    .personal-ul {
 
       display: flex;
       justify-content: space-between;
-      .label{
+
+      .label {
         color: #fff;
         font-size: 12px;
       }
-      p{
+
+      p {
         margin-top: 10px;
-        span{
+
+        span {
           font-size: 22px;
           color: #ffffff;
         }
       }
     }
   }
-  .list-active{
-  display: none;
-  width: 458px;
-  height: 165px;
-  padding: 20px;
-  background: #FFFFFF;
-  box-sizing: border-box;
-  box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.05);
-  border-radius: 2px;
-  border: 1px solid #EDEFF0;
-  position: absolute;
-  top: 30px;
-  left: -16%;
-  z-index: 999;
-  .list-content{
-    display: flex;
-    padding-bottom: 20px;
-    border-bottom: 1px solid #EDEFF0;
-    .list-img{
-      width: 125px;
-      height: 70px;
-      position: relative;
-      ::v-deep .el-image{
-        border-radius: 4px !important;
+
+  .list-active {
+    display: none;
+    width: 458px;
+    height: 165px;
+    padding: 20px;
+    background: #FFFFFF;
+    box-sizing: border-box;
+    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
+    border-radius: 2px;
+    border: 1px solid #EDEFF0;
+    position: absolute;
+    top: 30px;
+    left: -16%;
+    z-index: 999;
+
+    .list-content {
+      display: flex;
+      padding-bottom: 20px;
+      border-bottom: 1px solid #EDEFF0;
+
+      .list-img {
+        width: 125px;
+        height: 70px;
+        position: relative;
+
+        ::v-deep .el-image {
+          border-radius: 4px !important;
+        }
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+
+        .course-type {
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          height: 20;
+          line-height: 20px;
+          font-size: 12px;
+          color: #FFFFFF;
+          padding: 0px 8px;
+          background: #f99000;
+          border-radius: 0px 12px 0px 0px;
+        }
       }
-      img{
-        width: 100%;
-        height: 100%;
-      }
-      .course-type{
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        height: 20;
-        line-height: 20px;
-        font-size: 12px;
-        color: #FFFFFF;
-        padding: 0px 8px;
-        background: #f99000;
-        border-radius: 0px 12px 0px 0px;
+
+      .list-text {
+        flex: 1;
+        margin-left: 12px;
+
+        h6 {
+          font-size: 14px;
+          margin: 0px;
+          font-weight: 500;
+          line-height: normal;
+          color: #04243C;
+        }
+
+        span {
+          font-size: 14px;
+          color: #6E7B84;
+        }
       }
     }
-    .list-text{
-      flex: 1;
-      margin-left: 12px;
-      h6{
-        font-size: 14px;
-        margin: 0px;
-        font-weight: 500;
-        line-height: normal;
-        color: #04243C;
-      }
-      span{
-        font-size: 14px;
-        color: #6E7B84;
+
+    .list-bottom {
+      padding-top: 10px;
+
+      ::v-deep .interact-bar-btns {
+        justify-content: space-between !important;
+
+        .interact-bar-btn {
+          margin: 0 !important;
+        }
       }
     }
   }
-  .list-bottom{
-    padding-top: 10px;
-    ::v-deep .interact-bar-btns{
-      justify-content: space-between !important;
-      .interact-bar-btn{
-        margin: 0 !important;
-      }
+
+  .list-info {
+    position: relative;
+
+    .span {
+      display: flex;
     }
   }
-}
-  .list-info{
-  position: relative;
-  .span{
-    display: flex;
+
+  .list-info:hover .list-active {
+    // transition: all 0.5s;
+    display: block;
   }
-}
-.list-info:hover .list-active{
-  // transition: all 0.5s;
-  display: block;
-}
-// .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
-//   width: 108px;
-//   height: 38px;
-// }
 
-.bannbox{
-  width: 100%;
-  height: 520px;
-  text-align: center;
-   filter:blur(5px);
-    z-index:-1;
-    background-size:100% 100%;
+  // .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
+  //   width: 108px;
+  //   height: 38px;
+  // }
 
-}
+  .bannbox {
+    width: 100%;
+    height: 520px;
+    text-align: center;
+    filter: blur(5px);
+    z-index: -1;
+    background-size: 100% 100%;
 
-::v-deep.swiper-slide .games .swiper-slide-active{
-  text-align: center !important;
-}
-#container{
-  position: absolute;
-  height: 520px;
-  top: 0;
-  width: 100%;
-}
-.banner-img{
-  height: 520px;
-  position:absolute;
-  top: 0;
-  left:0;
-  right:0;
-  transform:(-50%,-50%);
-}
-.course-banner{
+  }
+
+  ::v-deep.swiper-slide .games .swiper-slide-active {
+    text-align: center !important;
+  }
+
+  #container {
+    position: absolute;
+    height: 520px;
+    top: 0;
+    width: 100%;
+  }
+
+  .banner-img {
+    height: 520px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    transform: (-50%, -50%);
+  }
+
+  .course-banner {
     height: 520px;
     // background: url('/images/course-banner.png');
   }
-.case-orginfo{
-  // line-height: 25px;
-  height: 45px;
-}
-.three-line-ellipsis {
+
+  .case-orginfo {
+    // line-height: 25px;
+    height: 45px;
+  }
+
+  .three-line-ellipsis {
     overflow: hidden;
     text-overflow: ellipsis;
-     box-sizing: border-box;
-  -webkit-line-clamp: 3;
-    word-break: break-all;
-     display: -webkit-box;
-  -webkit-box-orient: vertical;
-}
-.case-box{
-  display: flex;
-
-  .case-index{
-    position: relative;
-    // width: 408px;
-    // height: 396px;
-    background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
-    border-radius: 8px;
     box-sizing: border-box;
-    // margin-right: 36px;
-    &:nth-child(2){
-      .case-top{
-        background: linear-gradient(333deg, #D2DEF3 0%, #B4C4E0 100%);
-      }
-    }
-    &:last-child{
-      .case-top{
-        background: linear-gradient(153deg, #A4D3DF 0%, #B4DCE6 100%);
-      }
-      margin-right: 0;
+    -webkit-line-clamp: 3;
+    word-break: break-all;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+  }
 
-    }
-   .case-inter{
-      position: absolute;
-      // left: 30px;
-      // bottom: 30px;
-      display: flex;
-      // ::v-deep .el-avatar--small{
-      //    width: 32px;
-      //    height: 32px;
-      // }
-    }
-    .case-top{
-      // height: 120px;
-      background: linear-gradient(153deg, #82A8D1 0%, #A4C5E8 100%);
-      border-radius: 8px 8px 0px 0px;
-    }
-    .case-conent{
-      position: absolute;
-      // top:40px;
-      // left:30px;
-      // width: 350px;
-      // height: 274px;
-      background: #FFFFFF;
-      box-shadow: 0px 1px 10px 0px rgba(4,36,60,0.05);
-      border-radius: 4px;
-      // padding: 30px;
-      .cast-time{
-        font-size: 14px;
-        color: #6E7B84;
-        // display: flex;
-        // justify-content: space-between;
-        // margin-bottom: 20px;
-          .time-one{
+  .case-box {
+    display: flex;
+
+    .case-index {
+      position: relative;
+      // width: 408px;
+      // height: 396px;
+      background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
+      border-radius: 8px;
+      box-sizing: border-box;
+
+      // margin-right: 36px;
+      &:nth-child(2) {
+        .case-top {
+          background: linear-gradient(333deg, #D2DEF3 0%, #B4C4E0 100%);
+        }
+      }
+
+      &:last-child {
+        .case-top {
+          background: linear-gradient(153deg, #A4D3DF 0%, #B4DCE6 100%);
+        }
+
+        margin-right: 0;
+
+      }
+
+      .case-inter {
+        position: absolute;
+        // left: 30px;
+        // bottom: 30px;
+        display: flex;
+        // ::v-deep .el-avatar--small{
+        //    width: 32px;
+        //    height: 32px;
+        // }
+      }
+
+      .case-top {
+        // height: 120px;
+        background: linear-gradient(153deg, #82A8D1 0%, #A4C5E8 100%);
+        border-radius: 8px 8px 0px 0px;
+      }
+
+      .case-conent {
+        position: absolute;
+        // top:40px;
+        // left:30px;
+        // width: 350px;
+        // height: 274px;
+        background: #FFFFFF;
+        box-shadow: 0px 1px 10px 0px rgba(4, 36, 60, 0.05);
+        border-radius: 4px;
+
+        // padding: 30px;
+        .cast-time {
+          font-size: 14px;
+          color: #6E7B84;
+
+          // display: flex;
+          // justify-content: space-between;
+          // margin-bottom: 20px;
+          .time-one {
             height: 24px;
             background: rgba($color: #387DF7, $alpha: 0.1);
             border-radius: 4px;
             // padding: 3px 10px;
             color: #387DF7;
             font-size: 12px;
-        }
-      }
-      .case-title{
-        // height: 48px;
-        // font-size: 16px;
-        font-weight: 600;
-        color: #00253E;
-        // line-height: 24px;
-      }
-      .case-text{
-        // height: 60px;
-        // font-size: 14px;
-        color: #6E7B84;
-        // line-height: 20px;
-        // margin-bottom: 30px;
-      }
-      ::v-deep .case-info{
-        .interact-bar-btns{
-          justify-content: space-between !important;
-          .interact-bar-btn{
-            margin: 0;
           }
         }
-      }
-    }
-  }
-}
-.casetwo{
-  border: 1px solid #F0F0F0;
-  width: 100%;
-  height: 245px;
-  margin-bottom:15px;
- position: relative;
-  background-color: #fff;
-  .case-top{
-    height: 70px;
-     background-image: linear-gradient(to right , #b8c7e2, #d0dcf3);
-  }
-}
-// .qa-dai{
-//   color: #5da1ff;
-// }
-.Uxtext{
-  font-weight: 450;
-  margin-top:5px;
-  margin-left:15px;
-  font-size:14px;
-  color:#3d3d3d;
-  cursor: pointer;
-  position: relative;
-}
-.uxicon{
-  font-size: 10px;
-  position: absolute;
-  top: -14px;
-  left: 98%;
-}
-.text-status1 {
-  // padding:3px;
-  color: #1ea0fa;
-}
-.text-status2 {
-  // padding: 3px;
-  color: #00aa00;
-}
-.text-status3 {
-  // padding: 3px;
-  color: #588afc;
-  margin-left: -10px;
-}
-.qa-yi {
-  color: blue;
-}
-.el-card {
-  border: 1px solid #f0f0f0;
-}
-.portal-content {
-  font-family: 'Noto Sans SC';
-}
-// .one-line-ellipsis {
-//     width: 100%;
-//     white-space: nowrap;
-//     word-break: break-all;
-//     text-overflow: ellipsis;
-//     display: -webkit-box;
-//     -webkit-box-orient: vertical;
-//     -webkit-line-clamp: 1; /* 这里是超出几行省略 */
 
-// }
-.two-line-ellipsis {
-  display: -webkit-box;
-  // white-space:pre-wrap;
-  overflow: hidden;
-  // text-overflow:ellipsis;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  box-sizing: border-box;
-}
-
-.course-card {
-  // padding: 30px;
-  padding-bottom: 22px;
-  // width: 410px;
-  // margin-bottom: 30px;
-  // margin-right: 36px;
-  box-sizing: border-box;
-  position: relative;
-  background-color: #ffffff;
-
-  // ::v-deep .cor-praises {
-  //   position: absolute;
-  //   right: 52px;
-  //   bottom: 24px;
-  //   // -moz-user-select: none; /*火狐*/
-  //   // -webkit-user-select: none; /*webkit浏览器*/
-  //   // -ms-user-select: none; /*IE10*/
-  //   // -khtml-user-select: none; /*早期浏览器*/
-  //   // user-select: none;
-  //   .interact-bar-btn{
-  //     .interact-bar-value{
-  //       display: none;
-  //     }
-  //   }
-  // }
-  // .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: 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;
-      }
-    }
-  }
-  .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;
-  }
-}
-.course-card:hover .cardmark {
-  opacity: 1;
-}
-.modules {
-  margin-top: 20px;
-  // width: 100%;
-  display: flex;
-  .modules-title {
-    .modules-text {
-      height: 28px;
-      font-size: 20px;
-      font-family: PingFangSC-Semibold-, PingFangSC-Semibold;
-      font-weight: 700;
-      color: #333333;
-    }
-    .recommend {
-      vertical-align: text-bottom;
-      height: 26px;
-    }
-    .quyer-tag {
-      margin-left: 15px;
-      a {
-        color: #333333;
-        font-size: 14px;
-        margin: 0 15px;
-        display: inline-block;
-        text-decoration: none;
-        outline: none;
-      }
-      .current {
-        width: 44px;
-        height: 26px;
-        background: #387DF7;
-        border-radius: 4px;
-        color: #fff;
-        line-height: 26px;
-        text-align: center;
-      }
-      // .current::after {
-      //   content: '';
-      //   width: 18px;
-      //   height: 2px;
-      //   background-color: #5da1ff;
-      //   margin: 0 auto;
-      //   display: block;
-      // }
-    }
-    .more {
-      float: right;
-      margin-top: 7px;
-      margin-right: 40px;
-      color: #333333;
-      font-size: 14px;
-    }
-  }
-
-  .modules-list {
-    margin-top: 30px;
-    // margin-bottom: 15px;
-    // margin-right: 36px;
-    .case-card {
-      // width: 593px;
-      margin-bottom: 15px;
-      .case-info-image-box {
-        position: relative;
-        .case-info {
-          width: 385px;
-          .case-info-title {
-            font-size: 18px;
-            color: #343434;
-            margin-bottom: 5px;
-            .case-info-time {
-              font-size: 12px;
-              color: #999999;
-              float: right;
-              margin-top: 8px;
-            }
-          }
-          .case-info-summary {
-            font-size: 12px;
-            color: #666666;
-            height: 82px;
-            line-height: 18px;
-          }
+        .case-title {
+          // height: 48px;
+          // font-size: 16px;
+          font-weight: 600;
+          color: #00253E;
+          // line-height: 24px;
         }
-        img {
-          width: 160px;
-          height: 105px;
-          position: absolute;
-          top: 5px;
-          right: 0;
-        }
-      }
-      .case-info-box {
-        .case-info {
-          .case-info-title {
-            font-size: 18px;
-            color: #343434;
-            margin-bottom: 5px;
-            .case-info-time {
-              font-size: 12px;
-              color: #999999;
-              float: right;
-              margin-top: 8px;
-            }
-          }
-          .case-info-summary {
-            font-size: 12px;
-            color: #666666;
-            height: 82px;
-            line-height: 18px;
-          }
-        }
-      }
-      .case-other-info {
-        height: 40px;
-        margin-top: 10px;
-        display: flex;
-        justify-content: space-between;
-      }
-    }
 
-    .article-card {
-      width: 100%;
-      background: #fff;
-      // padding: 30px;
-      border-radius: 8px;
-
-      .article-card-left {
-        // float: left;
-        .article-card-box {
-
-          .article-info-image-box {
-            .article-info {
-              height: 400px;
-              .article-info-title {
-                font-size: 16px;
-                color: #00253E;
-                font-weight: 500;
-                margin-bottom: 5px;
-                margin-top: 5px;
-              }
-              .article-info-summary {
-                font-size: 14px;
-                color: #6E7B84;
-                height: 160px;
-                line-height: 22px;
-              }
-            }
-            img {
-              width: 470px;
-              height: 330px;
-              //  width: 100%;
-              // height: 100%;
-            }
-          }
-        }
-      }
-
-      .article-card-right {
-        // float: right;
-        // width: 68%;
-        flex: 1;
-        margin-left: 28px;
-        .article-card-box {
-          // height: 160px;
-          margin-bottom: 16px;
-          padding-bottom: 16px;
-          &:last-child{
-            margin-bottom: 0px;
-          padding-bottom: 0px;
-          }
-          .article-info-box {
-            .article-info {
-              display: flex;
-              .article-image {
-                // width: 150px;
-                // height: 150px;
-                // margin-right: 10px;
-                width: 140px;
-                height: 105px;
-                margin-top: 10px;
-                margin-left: 20px;
-              }
-              .article-body {
-                flex: 1;
-                .article-info-title {
-                  font-size: 18px;
-                  color: #343434;
-                  margin-bottom: 5px;
-                  .article-info-time {
-                    font-size: 12px;
-                    color: #999999;
-                    float: right;
-                    margin-top: 8px;
-                    font-weight: 500;
-                  }
-                }
-                .article-info-summary {
-                  padding-top: 9px;
-                  font-size: 14px;
-                  color: #666666;
-                  height: 43px;
-                  line-height: 18px;
-                  font-weight: 500;
-                  margin-bottom: 20px;
-                }
-              }
-            }
-          }
-        }
-        .article-card-box:not(:last-child) {
-          border-bottom: 1px solid #ededed;
-        }
-      }
-
-      .article-other-info {
-        // height: 40px;
-        // margin-top: 10px;
-        display: flex;
-        // justify-content: space-between;
-      }
-    }
-    .qa-box{
-      display: flex;
-      .qa-card{
-      // width: 298px;
-      // height: 320px;
-      // padding: 30px;
-      box-sizing: border-box;
-      box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.05);
-      border-radius: 8px;
-      // margin-right: 36px;
-      background: #fff;
-      &:last-child{
-        margin-right: 0;
-      }
-      .qa-top{
-        & span:first-child{
-          height: 24px;
-          background: rgba($color: #387DF7, $alpha: 0.05);
-          // padding: 3px 10px;
-          border-radius: 4px;
-          font-size: 12px;
-          color: #387DF7;
-          // margin-right: 46px;
-        }
-        span{
+        .case-text {
+          // height: 60px;
           // font-size: 14px;
           color: #6E7B84;
+          // line-height: 20px;
+          // margin-bottom: 30px;
         }
-      }
-      .qa-center{
-        position: relative;
-        // margin-top: 20px;
-        // width: 238px;
-        // height: 152px;
-        background: rgba($color: #04243C, $alpha: 0.04);
-        border-radius: 4px;
-        // padding: 20px;
-        .qa-views{
-          position: absolute;
-          color: #6E7B84;
-          font-size: 14px;
-          // left: 20px;
-          // bottom: 20px;
 
+        ::v-deep .case-info {
+          .interact-bar-btns {
+            justify-content: space-between !important;
+
+            .interact-bar-btn {
+              margin: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .casetwo {
+    border: 1px solid #F0F0F0;
+    width: 100%;
+    height: 245px;
+    margin-bottom: 15px;
+    position: relative;
+    background-color: #fff;
+
+    .case-top {
+      height: 70px;
+      background-image: linear-gradient(to right, #b8c7e2, #d0dcf3);
+    }
+  }
+
+  // .qa-dai{
+  //   color: #5da1ff;
+  // }
+  .Uxtext {
+    font-weight: 450;
+    margin-top: 5px;
+    margin-left: 15px;
+    font-size: 14px;
+    color: #3d3d3d;
+    cursor: pointer;
+    position: relative;
+  }
+
+  .uxicon {
+    font-size: 10px;
+    position: absolute;
+    top: -14px;
+    left: 98%;
+  }
+
+  .text-status1 {
+    // padding:3px;
+    color: #1ea0fa;
+  }
+
+  .text-status2 {
+    // padding: 3px;
+    color: #00aa00;
+  }
+
+  .text-status3 {
+    // padding: 3px;
+    color: #588afc;
+    margin-left: -10px;
+  }
+
+  .qa-yi {
+    color: blue;
+  }
+
+  .el-card {
+    border: 1px solid #f0f0f0;
+  }
+
+  .portal-content {
+    font-family: 'Noto Sans SC';
+  }
+
+  // .one-line-ellipsis {
+  //     width: 100%;
+  //     white-space: nowrap;
+  //     word-break: break-all;
+  //     text-overflow: ellipsis;
+  //     display: -webkit-box;
+  //     -webkit-box-orient: vertical;
+  //     -webkit-line-clamp: 1; /* 这里是超出几行省略 */
+
+  // }
+  .two-line-ellipsis {
+    display: -webkit-box;
+    // white-space:pre-wrap;
+    overflow: hidden;
+    // text-overflow:ellipsis;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    box-sizing: border-box;
+  }
+
+  .course-card {
+    // padding: 30px;
+    padding-bottom: 22px;
+    // width: 410px;
+    // margin-bottom: 30px;
+    // margin-right: 36px;
+    box-sizing: border-box;
+    position: relative;
+    background-color: #ffffff;
+
+    // ::v-deep .cor-praises {
+    //   position: absolute;
+    //   right: 52px;
+    //   bottom: 24px;
+    //   // -moz-user-select: none; /*火狐*/
+    //   // -webkit-user-select: none; /*webkit浏览器*/
+    //   // -ms-user-select: none; /*IE10*/
+    //   // -khtml-user-select: none; /*早期浏览器*/
+    //   // user-select: none;
+    //   .interact-bar-btn{
+    //     .interact-bar-value{
+    //       display: none;
+    //     }
+    //   }
+    // }
+    // .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: 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;
+        }
+      }
+    }
+
+    .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;
+    }
+  }
+
+  .course-card:hover .cardmark {
+    opacity: 1;
+  }
+
+  .modules {
+    margin-top: 20px;
+    // width: 100%;
+    display: flex;
+
+    .modules-title {
+      .modules-text {
+        height: 28px;
+        font-size: 20px;
+        font-family: PingFangSC-Semibold-, PingFangSC-Semibold;
+        font-weight: 700;
+        color: #333333;
+      }
+
+      .recommend {
+        vertical-align: text-bottom;
+        height: 26px;
+      }
+
+      .quyer-tag {
+        margin-left: 15px;
+
+        a {
+          color: #333333;
+          font-size: 14px;
+          margin: 0 15px;
+          display: inline-block;
+          text-decoration: none;
+          outline: none;
+        }
+
+        .current {
+          width: 44px;
+          height: 26px;
+          background: #387DF7;
+          border-radius: 4px;
+          color: #fff;
+          line-height: 26px;
+          text-align: center;
+        }
+
+        // .current::after {
+        //   content: '';
+        //   width: 18px;
+        //   height: 2px;
+        //   background-color: #5da1ff;
+        //   margin: 0 auto;
+        //   display: block;
+        // }
+      }
+
+      .more {
+        float: right;
+        margin-top: 7px;
+        margin-right: 40px;
+        color: #333333;
+        font-size: 14px;
+      }
+    }
+
+    .modules-list {
+      margin-top: 30px;
+
+      // margin-bottom: 15px;
+      // margin-right: 36px;
+      .case-card {
+        // width: 593px;
+        margin-bottom: 15px;
+
+        .case-info-image-box {
+          position: relative;
+
+          .case-info {
+            width: 385px;
+
+            .case-info-title {
+              font-size: 18px;
+              color: #343434;
+              margin-bottom: 5px;
+
+              .case-info-time {
+                font-size: 12px;
+                color: #999999;
+                float: right;
+                margin-top: 8px;
+              }
+            }
+
+            .case-info-summary {
+              font-size: 12px;
+              color: #666666;
+              height: 82px;
+              line-height: 18px;
+            }
+          }
+
+          img {
+            width: 160px;
+            height: 105px;
+            position: absolute;
+            top: 5px;
+            right: 0;
+          }
+        }
+
+        .case-info-box {
+          .case-info {
+            .case-info-title {
+              font-size: 18px;
+              color: #343434;
+              margin-bottom: 5px;
+
+              .case-info-time {
+                font-size: 12px;
+                color: #999999;
+                float: right;
+                margin-top: 8px;
+              }
+            }
+
+            .case-info-summary {
+              font-size: 12px;
+              color: #666666;
+              height: 82px;
+              line-height: 18px;
+            }
+          }
+        }
+
+        .case-other-info {
+          height: 40px;
+          margin-top: 10px;
+          display: flex;
+          justify-content: space-between;
+        }
+      }
+
+      .article-card {
+        width: 100%;
+        background: #fff;
+        // padding: 30px;
+        border-radius: 8px;
+
+        .article-card-left {
+
+          // float: left;
+          .article-card-box {
+
+            .article-info-image-box {
+              .article-info {
+                height: 400px;
+
+                .article-info-title {
+                  font-size: 16px;
+                  color: #00253E;
+                  font-weight: 500;
+                  margin-bottom: 5px;
+                  margin-top: 5px;
+                }
+
+                .article-info-summary {
+                  font-size: 14px;
+                  color: #6E7B84;
+                  height: 160px;
+                  line-height: 22px;
+                }
+              }
+
+              img {
+                width: 470px;
+                height: 330px;
+                //  width: 100%;
+                // height: 100%;
+              }
+            }
+          }
+        }
+
+        .article-card-right {
+          // float: right;
+          // width: 68%;
+          flex: 1;
+          margin-left: 28px;
+
+          .article-card-box {
+            // height: 160px;
+            margin-bottom: 16px;
+            padding-bottom: 16px;
+
+            &:last-child {
+              margin-bottom: 0px;
+              padding-bottom: 0px;
+            }
+
+            .article-info-box {
+              .article-info {
+                display: flex;
+
+                .article-image {
+                  // width: 150px;
+                  // height: 150px;
+                  // margin-right: 10px;
+                  width: 140px;
+                  height: 105px;
+                  margin-top: 10px;
+                  margin-left: 20px;
+                }
+
+                .article-body {
+                  flex: 1;
+
+                  .article-info-title {
+                    font-size: 18px;
+                    color: #343434;
+                    margin-bottom: 5px;
+
+                    .article-info-time {
+                      font-size: 12px;
+                      color: #999999;
+                      float: right;
+                      margin-top: 8px;
+                      font-weight: 500;
+                    }
+                  }
+
+                  .article-info-summary {
+                    padding-top: 9px;
+                    font-size: 14px;
+                    color: #666666;
+                    height: 43px;
+                    line-height: 18px;
+                    font-weight: 500;
+                    margin-bottom: 20px;
+                  }
+                }
+              }
+            }
+          }
+
+          .article-card-box:not(:last-child) {
+            border-bottom: 1px solid #ededed;
+          }
+        }
+
+        .article-other-info {
+          // height: 40px;
+          // margin-top: 10px;
+          display: flex;
+          // justify-content: space-between;
+        }
+      }
+
+      .qa-box {
+        display: flex;
+
+        .qa-card {
+          // width: 298px;
+          // height: 320px;
+          // padding: 30px;
+          box-sizing: border-box;
+          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
+          border-radius: 8px;
+          // margin-right: 36px;
+          background: #fff;
+
+          &:last-child {
+            margin-right: 0;
+          }
+
+          .qa-top {
+            & span:first-child {
+              height: 24px;
+              background: rgba($color: #387DF7, $alpha: 0.05);
+              // padding: 3px 10px;
+              border-radius: 4px;
+              font-size: 12px;
+              color: #387DF7;
+              // margin-right: 46px;
+            }
+
+            span {
+              // font-size: 14px;
+              color: #6E7B84;
+            }
+          }
+
+          .qa-center {
+            position: relative;
+            // margin-top: 20px;
+            // width: 238px;
+            // height: 152px;
+            background: rgba($color: #04243C, $alpha: 0.04);
+            border-radius: 4px;
+
+            // padding: 20px;
+            .qa-views {
+              position: absolute;
+              color: #6E7B84;
+              font-size: 14px;
+              // left: 20px;
+              // bottom: 20px;
+
+            }
+          }
+
+          .qa-char {
+            display: flex;
+          }
         }
       }
-      .qa-char{
-        display: flex;
-      }
-    }
     }
   }
-}
 </style>
diff --git a/src/views/portal/case/Detail.vue b/src/views/portal/case/Detail.vue
index 00a59878..d5324ff8 100644
--- a/src/views/portal/case/Detail.vue
+++ b/src/views/portal/case/Detail.vue
@@ -96,7 +96,7 @@
               <el-empty :image-size="200"></el-empty>
             </div>
           </div>
-          <div :class="zoomShow?'':'xcontent2-minor'">
+          <div class="xcontent2-minor" :style="{display:zoomShow? '':'none'}">
             <div>
             <div id="fixd-box">
             <div class="portal-ranking ranking-bg">