替换图片

src/api/modules/cases.js

@@ -1,6 +1,6 @@
 /* 案例模块的相关处理*/
 import ajax from '@/utils/xajax.js'
-
+import ajaxs from '@/api/ajax.js'
 /**首页查询
  * pageSize
  * orderField
@@ -88,6 +88,12 @@ const usernameList = function (pageSize) {
 const queryPraises = function (pageSize) {
   return ajax.get(`/xboe/m/boe/cases/query-praises?pageSize=${pageSize}`);
 }
+const queryPraisesNew = function (pageSize,rankType) {
+  return ajax.get(`/xboe/m/boe/cases/queryPopularity?pageSize=${pageSize}&rankType=${rankType}`);
+}
+const queryRecommendRank = function (pageSize) {
+  return ajax.get(`/xboe/m/boe/cases/queryRecommendRank?pageSize=${pageSize}`);
+}
 /*
 好评榜
 @param pageSize 长度
@@ -95,6 +101,9 @@ const queryPraises = function (pageSize) {
 const queryComments = function (pageSize) {
   return ajax.get(`/xboe/m/boe/cases/query-comments?pageSize=${pageSize}`);
 }
+const queryCommentsNew = function (pageSize,rankType) {
+  return ajax.get(`/xboe/m/boe/cases/queryHighOpinion?pageSize=${pageSize}&rankType=${rankType}`);
+}
 
 /**
  * 专业分类
@@ -186,11 +195,36 @@ const endReadTimer =  (data)=> ajax.postJson('/xboe/m/boe/cases/recommend/record
 const caseYears = function (query = {}) {
   return ajax.post('/xboe/m/boe/cases/caseYears', query);
 }
-
-
-
-
+//案例推荐榜单
+const getQueryRecommendRank = function (params) {
+  return ajax.get(`/xboe/m/boe/cases/queryRecommendRank?pageSize=${params.pageSize}`)
+}
+//案例上榜
+const riseIntoRank = (data) => ajax.post(`/xboe/m/boe/cases/riseIntoRank?caseId=${data.caseId}`)
+//取消上榜
+const cancelRiseIntoRank = (data) => ajax.post(`/xboe/m/boe/cases/cancelRiseIntoRank?caseId=${data.caseId}`)
+//调整榜单
+const adjustRank = (data) => ajax.post(`/xboe/m/boe/cases/adjustRank?caseIds=${data.caseIds}`)
+//收藏案例
+const queryFavoriteCaseOfIndex = (params) => ajax.get(`/xboe/m/boe/cases/queryFavoriteCaseOfIndex?pageIndex=${params.pageIndex}&pageSize=${params.pageSize}&orderField=${params.orderField}&orderAsc=${params.orderAsc}`)
+//浏览记录
+const queryViewRecord = (data) => ajaxs.post(`/statApi/xboe/m/stat/userdynamic/list?pageIndex=${data.pageIndex}&pageSize=${data.pageSize}&contentType=${data.contentType}&aid=${data.aid}&hidden=${data.hidden}&eventKey=${data.eventKey}`)
+//浏览量TOP榜单
+const queryPopularityOfMajor = (params) => ajax.get(`/xboe/m/boe/cases/queryPopularityOfMajor?pageSize=${params.pageSize}&rankMonth=${params.rankMonth}&majorId=${params.majorId}`)
+//浏览记录新
+const browsingHistory = (params) => ajax.get(`/xboe/m/boe/cases/browsingHistory?pageIndex=${params.pageIndex}&pageSize=5`)
+//获取所有的专业月份
+const queryAllTimePopularityOfMajor = () => ajax.get('/xboe/m/boe/cases/queryAllTimePopularityOfMajor')
 export default {
+  queryAllTimePopularityOfMajor,
+  getQueryRecommendRank,
+  queryPopularityOfMajor,
+  browsingHistory,
+  queryViewRecord,
+  queryFavoriteCaseOfIndex,
+  riseIntoRank,
+  cancelRiseIntoRank,
+  adjustRank,
   indexList,
   queryList,
   queryListV2,
@@ -202,7 +236,10 @@ export default {
   query,
   usernameList,
   queryPraises,
+  queryPraisesNew,
+  queryRecommendRank,
   queryComments,
+  queryCommentsNew,
   majorTypes,
   details,
   ids,

src/assets/styles/portal.scss

@@ -110,7 +110,7 @@ body {margin: 0px;padding: 0px;}
       padding-bottom:12px
     }
     .ranking-data{
-      min-height: 246px;
+      min-height: 196px;
       margin: 0px;
       overflow-y: auto;
     }
@@ -130,7 +130,7 @@ body {margin: 0px;padding: 0px;}
     padding-bottom:12px
   }
   .ranking-data{
-    min-height: 246px;
+    min-height: 196px;
     margin: 0px;
     // overflow-y: auto;
   }

src/components/Case/collectList.vue

@@ -8,7 +8,10 @@
 
           </div>
           <div class="article-info-date">
-            <el-button @click="delItem(item)" type="text" style="color: #8590A6;font-size:14px" icon="el-icon-star-on">取消收藏</el-button>
+            <div class="box">
+              <div class="image"></div>
+              <el-button @click="delItem(item)" type="text" style="color: #8590A6;font-size:14px">取消收藏</el-button>
+            </div>
           </div>
         </div>
         <div class="article-info-tools">
@@ -161,6 +164,26 @@
         line-height: 40px;
         font-weight: 200;
         color: #999999;
+        display: flex;
+        justify-content: end;
+        .box{
+          display: flex;
+          justify-content: end;
+          align-items: center;
+          .image{
+            width: 14px;
+            height: 14px;
+            background: url('../../assets/images/case/Frame(5).png') no-repeat;
+            background-size: 100%;
+            margin-right: 10px;
+          }
+          &:hover{
+            .image{
+              background: url('../../assets/images/case/Frame(12).png') no-repeat;
+              background-size: 100%;
+            }
+          }
+        }
         i {
           margin-right: 5px;
         }

src/components/HomePage/caseList.vue

@@ -8,7 +8,10 @@
                     <span style="margin-left:28px">{{item.eventTime}}</span>
                     <span v-if="item.aid == userInfo.aid" class="follow-hide pointer" style="float:right">
                       <span v-if="item.hidden">已隐藏</span>
-                      <span v-else  @click="emitHide(item.id)">  <svg-icon style="margin-right: 10px;font-size:22px;padding-top: 4px;" icon-class="eyes"></svg-icon>隐藏 </span>
+                      <span class="span_hidden" v-else  @click="emitHide(item.id)">  
+                        <!-- <svg-icon style="margin-right: 10px;font-size:22px;padding-top: 4px;" icon-class="eyes"></svg-icon> -->
+                         <div class="is_hidden"></div>
+                        隐藏 </span>
                     </span>
                   </p>
                   <div class="case-info-cont">
@@ -136,6 +139,22 @@
   </script>
 
   <style lang="scss" scoped>
+  .span_hidden{
+    display: flex;
+    &:hover{
+      .is_hidden{
+        background: url('../../assets/images/case/Frame(12).png');
+        background-size: 100%;
+      }
+    }
+    .is_hidden{
+      width: 18px;
+      height: 18px;
+      background: url('../../assets/images/case/Frame(5).png');
+      background-size: 100%;
+      margin-right: 10px;
+    }
+  }
     .sign-text{
       color: #666666;
       font-size: 14px;

src/components/Portal/authorInfo.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="item-author">
-		<div  @click="toHome()">
+		<div  v-if="userName" @click="toHome()">
       <!-- <el-avatar shape="square" size="small" :src="userAvatar" v-if="userAvatar"></el-avatar> -->
       <!-- <div v-else class="uavatar"><span class="uavatar-text">{{avatarText}}</span></div> -->
       <el-avatar shape="circle" size="small" :src="userAvatar" v-if="userAvatar"></el-avatar>
@@ -12,9 +12,10 @@
         </div>
         </div>
     </div>
-		<div v-if="!onlyAvatar" style="padding-left: 14px;padding-top: 6px;font-size: 14px;">
+		<div v-if="!onlyAvatar&&userName" style="padding-left: 14px;padding-top: 6px;font-size: 14px;">
       <span style="color: #333333;font-weight: 600;font-size: 16px;">{{userName}}</span>
       <span class="author-text" v-if="userInfo && userInfo!=''"> {{userInfo}} </span>
+      <span style="margin-left: 15px;" class="comWords" v-if="authorTags.length != 0" v-for="tag in authorTags">{{tag}}</span>
     </div>
     <slot />
 	</div>
@@ -49,6 +50,12 @@
       onlyAvatar:{
         type:Boolean,
         default:false
+      },
+      authorTags: {
+        type:Array,
+        default(){
+          return []
+        }
       }
 		},
     data(){
@@ -119,6 +126,14 @@
       font-weight: 300;
       margin-left: 4px;
     }
+    .comWords {
+      background: #409EFF;
+      border-radius: 2px;
+      font-weight: 400;
+      font-size: 12px;
+      color: #FFFFFF;
+      padding: 4px 10px;
+    }
     .uavatar{
       // border: 1px solid #73adfe;
       width: 28px;

src/components/Portal/comments.vue

@@ -92,11 +92,19 @@
                       <div class="comment-btns">
 
                          <!-- <a><svg-icon icon-class="like"></svg-icon><span>66</span></a> -->
-                         <div v-show="btnsShowRowId==com.id">
+                         <div style="display: flex" v-show="btnsShowRowId==com.id">
 
-                           <a @click="showReply(com)"><svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>回复</span></a>
+                           <a style="display: flex;align-items: center;" @click="showReply(com)">
+                            <!-- <svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon> -->
+                              <div class="is_comment"></div>
+                              <span>回复</span> 
+                           </a>
                            <!--必须当前登录人是一个人-->
-                           <a v-if="userInfo.aid==com.sysCreateAid" @click="delCommnet(com,comIdx)"><svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>删除</span></a>
+                           <a style="display: flex;align-items: center;" v-if="userInfo.aid==com.sysCreateAid" @click="delCommnet(com,comIdx)">
+                            <!-- <svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon> -->
+                             <div class="is_remove"></div>
+                            <span>删除</span>
+                           </a>
                            <a v-if="com.replyList && com.replyList.length==5" @click="showMoreReply(com)" ><svg-icon icon-class="all" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>全部</span></a>
                          </div>
                       </div>
@@ -960,6 +968,28 @@
         line-height: 35px;
         a{
           margin-right:15px;
+          &:hover{
+            .is_comment{
+              background: url('../../assets/images/case/Frame(9).png');
+              background-size: 100%;
+            }
+            .is_remove{
+              background: url('../../assets/images/case/Frame(15).png');
+              background-size: 100%;
+            }
+          }
+          .is_comment{
+            width: 16px;
+            height: 16px;
+            background: url('../../assets/images/case/Frame.png');
+            background-size: 100%;
+          }
+          .is_remove{
+            width: 16px;
+            height: 16px;
+            background: url('../../assets/images/case/Frame(8).png');
+            background-size: 100%;
+          }
           span{
             margin-left: 6px;
             color: #8590A6;

src/components/Portal/interactBar.vue

@@ -10,7 +10,8 @@
         <el-tooltip  effect="light" :content="type == 4 || type == 5 ?'回答':'回复'" placement="left" :visible-arrow="false" popper-class="text-tooltip">
           <!-- <svg-icon style="margin-right: 0;"  icon-class="comment"></svg-icon> -->
          <!-- <img style="width:16px;height:14px;vertical-align: middle;" :src="require('@/assets/images/icon/answers.png')"> -->
-         <svg-icon style="margin-right: 0;font-size: 14px;" icon-class="comment"></svg-icon>
+         <!-- <svg-icon style="margin-right: 0;font-size: 14px;" icon-class="comment"></svg-icon> -->
+         <div class="is_comment"></div>
         </el-tooltip>
         <span class="interact-bar-value"> {{ data.answers? data.answers:0}}</span>
       </div>
@@ -23,14 +24,16 @@
       </div>
       <div v-if="comments" class="interact-bar-btn" :style="`min-width: ${nodeWidth};`" :class="{cursor:!readonly}">
         <el-tooltip  effect="light" content="评论" placement="left" :visible-arrow="false" popper-class="text-tooltip">
-          <svg-icon style="margin-right: 0;font-size: 14px;" icon-class="comment"></svg-icon>
+          <!-- <svg-icon style="margin-right: 0;font-size: 14px;" icon-class="comment"></svg-icon> -->
+           <div class="is_comment"></div>
         </el-tooltip>
         <span class="interact-bar-value"> {{data.comments? data.comments:0}}</span>
       </div>
 
       <div v-if="praises" @click="addPraise()" :style="`min-width: ${nodeWidth};`" class="interact-bar-btn" :class="{cursor:!readonly}">
         <el-tooltip effect="light" content="点赞" placement="top" :visible-arrow="false" popper-class="text-tooltip">
-          <svg-icon style="margin-right: 0;font-size: 14px;" :icon-class="isPraise?'praised':'like'"></svg-icon>
+          <!-- <svg-icon style="margin-right: 0;font-size: 14px;" :icon-class="isPraise?'praised':'like'"></svg-icon> -->
+           <div class="is_praise" :class="isPraise?'is_praise_a':'is_praise'"></div>
         </el-tooltip>
         <span class="interact-bar-value"> {{ data.praises? data.praises:0}}</span>
       </div>
@@ -38,19 +41,22 @@
       <div v-if="favorites"  @click.stop="addFavorite()" :style="`min-width: ${nodeWidth};`" class="interact-bar-btn" :class="{cursor:!readonly}">
         <el-tooltip effect="light" content="收藏" placement="top" :visible-arrow="false" popper-class="text-tooltip">
           <svg-icon v-if="courseExclusive" style="font-size: 32px;margin-right: 0;" :icon-class="isFavorite?'collectedCourse':'collectionCourse'"></svg-icon>
-          <svg-icon v-else style="margin-right: 0;" :style="{'font-size':(size+2)+'px'}" :icon-class="isFavorite?'scactive2':'xihuan'"></svg-icon>
+          <!-- <svg-icon v-else style="margin-right: 0;" :style="{'font-size':(size+2)+'px'}" :icon-class="isFavorite?'scactive2':'xihuan'"></svg-icon> -->
+           <div v-else class="is_favorite" :class="isFavorite?'is_favorite_a':'is_favorite'"></div>
         </el-tooltip>
         <span v-if="!courseExclusive" class="interact-bar-value"> {{ data.favorites? data.favorites:0}}</span>
       </div>
       <div v-if="shares" @click="addShare()" :style="`min-width: ${nodeWidth};`" class="interact-bar-btn" :class="{cursor:!readonly}">
         <el-tooltip effect="light" content="分享" placement="top" :visible-arrow="false" popper-class="text-tooltip">
-          <svg-icon icon-class="share" style="margin-right: 0;" :style="{'font-size':(size+2)+'px'}"></svg-icon>
+          <!-- <svg-icon icon-class="share" style="margin-right: 0;" :style="{'font-size':(size+2)+'px'}"></svg-icon> -->
+           <div class="is_share"></div>
         </el-tooltip>
         <span class="interact-bar-value"> {{data.shares}}</span>
       </div>
       <div v-if="views" style="cursor: default;" :style="`min-width: ${nodeWidth};margin-left:${data.views>1000? '20px':'20px'}`" class="interact-bar-btn ese-view" :class="{cursor:!readonly}">
         <el-tooltip effect="light" content="浏览量" placement="top" :visible-arrow="false" popper-class="text-tooltip">
-          <svg-icon style="margin-right: 0; font-size:22px;" icon-class="eyes"></svg-icon>
+          <!-- <svg-icon style="margin-right: 0; font-size:22px;" icon-class="eyes"></svg-icon> -->
+           <div class="is_view"></div>
         </el-tooltip>
         <!-- <div style="float:right;margin-left:8px"> -->
         <span  class="interact-bar-value eyes-view" > {{ formatNum(data.views)}}</span>
@@ -530,6 +536,7 @@ export default {
             this.$store.dispatch("unicomFavorites",false)
           }
           this.$message({message:'已取消收藏',type:'success'});
+          this.$emit('deleteFavorite',true)
           //this.$emit('addFavorite',res.result);//添加收藏,如果是true代表添加成功，false代表已存在
         }else{
           console.log('取消收藏失败：'+res.message);
@@ -713,6 +720,77 @@ export default {
     justify-content: flex-end;
     .interact-bar-btn {
       margin: 0 0 0 15px;
+      display: flex;
+      justify-content: end;
+      align-items: center;
+      &:hover{
+        .is_praise{
+          background: url('../../assets/images/case/Frame\(10\).png');
+        }
+        .is_favorite{
+          background: url('../../assets/images/case/Frame\(11\).png');
+          background-size: 100%;
+        }
+        .is_share{
+          background: url('../../assets/images/case/Frame\(14\).png');
+          background-size: 100%;
+        }
+        .is_view{
+          background: url('../../assets/images/case/Frame\(12\).png');
+        background-size: 100%;
+        }
+        .is_comment{
+          background: url('../../assets/images/case/Frame\(9\).png');
+          background-size: 100%;
+        }
+      }
+      .is_comment{
+        width: 16px;
+        height: 16px;
+        background: url('../../assets/images/case/Frame.png');
+        background-size: 100%;
+        margin-right: 4px;
+      }
+      .is_view{
+        width: 17px;
+        height: 17px;
+        background: url('../../assets/images/case/Frame\(5\).png');
+        background-size: 100%;
+        margin-right: 4px;
+      }
+      .is_share{
+        width: 16px;
+        height: 16px;
+        background: url('../../assets/images/case/Frame\(7\).png');
+        background-size: 100%;
+        margin-right: 4px;
+      }
+      .is_praise{
+        width: 14px;
+        height: 14px;
+        background: url('../../assets/images/case/Frame\(1\).png');
+        margin-right: 4px;
+      }
+      .is_praise_a{
+        width: 14px;
+        height: 14px;
+        background: url('../../assets/images/case/Frame\(10\).png');
+        margin-right: 4px;
+      }
+      .is_favorite{
+        width: 16px;
+        height: 16px;
+        background: url('../../assets/images/case/Frame\(2\).png');
+        background-size: 100%;
+        margin-right: 4px;
+      }
+      .is_favorite_a{
+        width: 16px;
+        height: 16px;
+        background: url('../../assets/images/case/Frame\(11\).png');
+        background-size: 100%;
+        margin-right: 4px;
+      }
     }
     .interact-bar-value{
       //  color:#6E7B84; ui图给的颜色，但是效果于ui图效果不一样，也没有透明度，所以找一个相近的和谐的颜色

src/components/PortalHeader.vue

@@ -51,7 +51,8 @@
               <el-dropdown placement="bottom" @command="handleContributor">
                 <span class="el-dropdown-link" style="font-size:16px;cursor: pointer;" :style="{color:textColor}">贡献者大会</span>
                 <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item command="one">2023</el-dropdown-item>
+                  <el-dropdown-item command="three">2024</el-dropdown-item>
+                  <el-dropdown-item command="one" divided>2023</el-dropdown-item>
                   <el-dropdown-item command="two" divided>2022</el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
@@ -246,6 +247,7 @@ export default {
       let obj = {
           one: urlPre + "/web/contributornew/index",
           two: urlPre + "/web/contributor/index",
+          three: urlPre + "/web/contributor_2024/index"
         };
         window.open(obj[val]);
     },

src/components/VideoPlayer/index.vue

@@ -266,7 +266,7 @@ export default {
     },
     isDrag:{
       type: Boolean,
-      default: null,
+      default: true,
     },
     isCrowd:{
       type: Boolean,

src/router/index.js

@@ -193,6 +193,20 @@ export const constantRoutes = [{
     name: 'caseDetail',
     meta: {title: '案例详情', keepAlive: true, icon: 'dashboard', noCache: false, affix: true},
   },
+  {
+    path: '/case/charts',
+    hidden: true,
+    component: (resolve) => require(['@/views/portal/case/Charts'], resolve),
+    name: 'caseCharts',
+    meta: {title: '排行榜', keepAlive: true, icon: 'dashboard', noCache: false, affix: true},
+  },
+  {
+    path: '/case/excellent',
+    hidden: true,
+    component: (resolve) => require(['@/views/portal/case/Excellent'], resolve),
+    name: 'caseExcellent',
+    meta: {title: '浏览量榜单', keepAlive: true, icon: 'dashboard', noCache: false, affix: true},
+  },
   {
     path: '/article',
     hidden: true,

src/views/case/ManageList.vue

@@ -32,6 +32,9 @@
           </div>
         </div>
       </div>
+      <div style="margin: 5px 0 0 5px;">
+        <el-button type="primary" @click="recoRanking">推荐榜单</el-button>
+      </div>
     </div>
     <el-table style="100%" :data="caseList" border stripe>
       <el-table-column label="标题" prop="title" show-overflow-tooltip>
@@ -49,6 +52,7 @@
       <el-table-column label="操作">
         <template slot-scope="scope">
           <el-button-group>
+            <el-button style="margin:0 5px" type="text" v-if="scope.row.recommendRank === ''" @click="suggest(scope.row)" icon="el-icon-medal">榜单推荐</el-button>
             <!-- <el-button type="text" @click="shareItem(scope.row)"  icon="el-icon-share" style="margin:0 5px">推荐</el-button> -->
             <el-button style="margin:0 5px" v-if="!scope.row.isTop && scope.row.confidentialityLevel == '内部'" type="text"
               @click="setTop(scope.row)" icon="el-icon-top">置顶</el-button>
@@ -56,8 +60,12 @@
               @click="setTop(scope.row)" icon="el-icon-bottom">取消置顶</el-button>
             <el-button type="text" icon="el-icon-medal"
               v-if="scope.row.filePath && scope.row.confidentialityLevel == '内部'"><span @click="cancal(scope.row)"
-                v-if="scope.row.excellent">取消最佳</span><span @click="open(scope.row)" v-else>最佳案例</span></el-button>
+                v-if="scope.row.excellent">取消最佳</span>
+                <!-- <span @click="open(scope.row)" v-else>最佳案例</span> -->
+                <span @click="theBest(scope.row)" v-else>最佳</span>
+              </el-button>
             <el-button style="margin:0 5px" type="text" @click="delItem(scope.row)" icon="el-icon-delete">删除</el-button>
+            <!-- <el-button style="margin:0 5px" type="text" @click="theBest(scope.row)" icon="el-icon-delete">最佳</el-button> -->
           </el-button-group>
         </template>
       </el-table-column>
@@ -121,16 +129,91 @@
       </div>
       <span slot="footer" class="dialog-footer"><el-button @click="recommend.dlgShow = false">关闭</el-button></span>
     </el-dialog>
+    <el-dialog
+      title="最佳案例"
+      :visible.sync="bestValue"
+      width="36%">
+      <div class="best_card">
+        <div class="card_item">
+          <div class="card_title">
+            <i class="icon"></i>
+            <span class="text">年度</span>
+          </div>
+          <el-input style="width:190px" disabled v-model="bestYear" placeholder="请输入年度"></el-input>
+        </div>
+        <div class="card_item">
+          <div class="card_title">
+            <i class="icon"></i>
+            <span class="text">组织领域</span>
+          </div>
+          <el-input disabled v-model="bestOrg" placeholder="请输入组织领域"></el-input>
+        </div>
+        <div class="card_item">
+          <div class="card_title">
+            <span class="text">最佳理由</span>
+          </div>
+          <el-input type="textarea"
+            placeholder="请输入内容"
+            v-model="bestTextarea"
+            maxlength="200"
+            show-word-limit></el-input>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="notBest">取 消</el-button>
+        <el-button type="primary" @click="parameBest">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-drawer
+      title="推荐榜单"
+      :visible.sync="RankingShow"
+      size="80%">
+      <div style="padding: 10px 20px 80px">
+        <el-table :data="tableData" border stripe>
+          <el-table-column
+            type="index"
+            width="50"
+            label="排序">
+          </el-table-column>
+          <el-table-column show-overflow-tooltip label="案例标题" prop="caseTitle"></el-table-column>
+          <el-table-column width="150px" label="作者名称" prop="caseAuthor"></el-table-column>
+          <el-table-column width="150px" label="上榜人" prop="caseAuthor"></el-table-column>
+          <el-table-column width="250px" label="上榜时间" prop="recommendRankPusTime"></el-table-column>
+          <el-table-column label="操作">
+            <template slot-scope="scope">
+              <el-button-group>
+                <el-button style="margin:0 5px" type="text" @click="handleNotRank(scope.row)" icon="el-icon-delete">取消推荐</el-button>
+                <el-button style="margin:0 5px" type="text" @click="moveUp(scope.row,scope.$index)" icon="el-icon-top">上移排序</el-button>
+                <el-button style="margin:0 5px" type="text" @click="moveDown(scope.row,scope.$index)" icon="el-icon-bottom">下移排序</el-button>
+              </el-button-group>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="rank_footer">
+        <el-button @click="closeDrawer" style="width: 130px;height:40px;margin-right: 30px;" type="default">取消</el-button>
+        <el-button @click="queryList" style="width: 130px;height:40px;margin-right: 15px;" type="primary">确定</el-button>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
 <script>
 import apiCase from '@/api/modules/cases.js';
 import apiUser from '@/api/system/user.js'
+import apiType from "@/api/modules/type.js";
 export default {
   name: 'articleItems',
   data() {
     return {
+      adminList: [],
+      caseType: process.env.VUE_APP_CASE_TYPE,
+      RankingShow: false,
+      bestYear: '',
+      bestOrg: '',
+      bestId: '',
+      bestTextarea: '',
+      bestValue: false,
       excellent: false,
       queryObj: {
         pageIndex: 1,
@@ -139,6 +222,8 @@ export default {
         excellent: '',
       }, //查询对象
       caseList: [], //案例列表
+      tableData: [],
+      caseIds: '',
       count: 0,
       recommend: {
         dlgShow: false,
@@ -171,8 +256,153 @@ export default {
   },
   mounted() {
     this.getData();
+    this.getList();
+    apiType.treeList(1,Number(this.caseType ?? 155),1).then(res=>{
+      if(res.code == 200){
+        this.adminList = res.data.records;
+      }
+    })
+  },
+  watch:{
+    RankingShow(val){
+      if(val){
+        this.getList()
+      }
+    }
   },
   methods: {
+    orgDomainTranslate(code) { // 组织领域翻译
+      if (code == '') {
+        return
+      }
+      let name = '';
+      let data = this.adminList.find(item => {
+        return item.code == code;
+      });
+      if (data) {
+        name = data.name;
+      }
+      return name;
+    },
+    suggest(record){
+      if(this.tableData.length == 10){
+        this.$message.error('最多推荐10个')
+        return
+      }
+      this.$confirm('你确认要推荐此案例吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        apiCase.riseIntoRank({caseId:record.id}).then(res=>{
+          if(res.status == 200 ){
+            this.$message.success('推荐成功')
+            this.getData()
+            this.getList()
+          }
+        })
+      })
+    },
+    handleNotRank(record){
+      this.$confirm('你确认要取消推荐吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        apiCase.cancelRiseIntoRank({caseId:record?.caseId}).then(res=>{
+          if(res.status == 200){
+            this.$message.success('取消推荐成功')
+            this.getList()
+            this.getData()
+          }
+        }).catch(()=>{
+          this.$message.error('取消推荐失败')
+        })
+      })
+    },
+    moveUp(row,index){
+      console.log(row,index,'index')
+      if(index == 0){
+        this.$message.error('已经排到第一位了')
+        return
+      }
+      this.swapArray(this.tableData,index,index-1)
+    },
+    moveDown(row,index){
+      if(index == this.tableData.length - 1){
+        this.$message.error('已经排到最后一位了')
+        return
+      }
+      this.swapArray(this.tableData,index,index+1)
+    },
+    swapArray(arr, index1, index2){
+      const temp = arr[index1];
+      arr.splice(index1, 1);
+      arr.splice(index2, 0, temp);
+    },
+    getList(){
+      apiCase.getQueryRecommendRank({pageSize:10}).then(res=>{
+        console.log(res,'res')
+        if(res.status == 200){
+          this.tableData = res.result
+          this.caseIds = res.result.map(item=>item.caseId).join(',')
+        }
+      })
+    },
+    notBest(){
+      this.bestValue = false
+      this.bestYear = ''
+      this.bestOrg = ''
+      this.bestId = ''
+      this.bestTextarea = ''
+    },
+    parameBest(){
+      this.excellent = true;
+      let data = {
+        id: this.bestId,
+        excellent: this.excellent,
+        excellentReason: this.bestTextarea
+      }
+      apiCase.excellent(data).then(res=>{
+        if (res.status == 200) {
+            this.$message({
+              type: 'success',
+              message: '设置最佳案例成功!'
+            });
+            this.getData()
+          }else{
+            this.$message({
+              type: 'error',
+              message: res.message
+            });
+          }
+          this.notBest()
+      })
+    },
+    recoRanking(){
+      this.RankingShow = true
+    },
+    closeDrawer(){
+      this.RankingShow = false
+    },
+    queryList(){
+      if(this.caseIds != this.tableData.map(item=>item.caseId).join(',')){
+        apiCase.adjustRank({caseIds:this.tableData.map(item=>item.caseId).join(',')}).then(res=>{
+          if(res.status == 200){
+            this.$message({
+              message: '调整成功',
+              type: 'success'
+            })
+          }
+        }).catch(()=>{
+          this.$message({
+            message: '调整失败',
+            type: 'error'
+          })
+        })
+      }
+      this.RankingShow = false
+    },
     // 导出
     importList() {
       apiCase.exports(this.queryObj).then(res => {
@@ -211,6 +441,11 @@ export default {
               message: '取消成功!'
             });
             this.getData()
+          }else{
+            this.$message({
+              type: 'error',
+              message: res.message
+            });
           }
         })
       }).catch(() => {
@@ -354,6 +589,12 @@ export default {
           this.$message({ type: 'info', message: '已取消删除', offset: 50 });
         });
     },
+    theBest(item){
+      this.bestValue = true
+      this.bestId = item.id
+      this.bestOrg = this.orgDomainTranslate(item.orgDomainParent)
+      this.bestYear = item.sysCreateTime.split('-')[0]
+    },
     //添加推荐
     shareItem(item) {
       this.shareItemData = { ...item }
@@ -467,6 +708,48 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.rank_footer{
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 80px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  background: #fff;
+  padding-right: 20px;
+}
+::v-deep .el-dialog__header{
+  border-bottom: 1px solid #f0f0f1;
+}
+::v-deep .el-textarea__inner{
+  height: 100px !important;
+}
+.best_card{
+  .card_item{
+    display: flex;
+    justify-content: start;
+    margin-bottom: 20px;
+    .card_title{
+      width: 94px;
+      min-width: 94px;
+      display: flex;
+      align-items: center;
+      justify-content: end;
+      margin-right: 14px;
+      .icon{
+        width:8px;
+        height: 8px;
+        background: url('../../assets/images/asterisk.png') no-repeat;
+        background-size: 100%;
+      }
+      .text{
+
+      }
+    }
+  }
+}
 .article-status1 {
   padding: 3px;
   border: 1px dotted #1ea0fa;

src/views/grateful/TeacherOpinion.vue

@@ -118,7 +118,7 @@ export default {
   }
 
   &::after {
-    content: '认证讲师库(2023)';
+    content: '认证讲师库';
     position: absolute;
     bottom: 25px;
     left: 180px;

src/views/hotforum/Index.vue

@@ -22,7 +22,7 @@
           {img:'01',url:'1265897142383042560'},
           {img:'02',url:'1265697724606210048'},
           {img:'03',url:''},
-          {img:'4',url:''},
+          {img:'04',url:'1321778585966247936'},
         ],
       }
     },

src/views/lecturer/CoachingPage.vue

@@ -22,7 +22,7 @@ export default {
   },
   methods:{
     getTeacherList() {
-      addTeacher({pageNo:1,pageSize:100,keyword:''}).then(res=>{
+      addTeacher({pageNo:1,pageSize:20,keyword:''}).then(res=>{
         this.options = res.data.map(item => {
           return { value: item.realName, label: item.realName };
         });

src/views/lecturer/CoachingSuccess.vue

@@ -64,7 +64,7 @@ export default {
       })
     },
     addTeacher() {
-      addTeacher({pageNo: 1, pageSize: 10, keyword: this.form.teacherNo}).then(res => {
+      addTeacher({pageNo: 1, pageSize: 10, userNo: this.form.teacherNo}).then(res => {
         this.getProgress(res.data[0].id)
       })
     },

src/views/lecturer/FinalSuccess.vue

@@ -100,7 +100,7 @@ export default {
       })
     },
     addTeacher() {
-      addTeacher({pageNo: 1, pageSize: 10, keyword: this.form.teacherNo}).then(res => {
+      addTeacher({pageNo: 1, pageSize: 10, userNo: this.form.teacherNo}).then(res => {
         this.getProgress(res.data[0].id)
       })
     },

src/views/lecturer/OnlineLearning.vue

@@ -56,7 +56,7 @@ export default {
       })
     },
     addTeacher(){
-      addTeacher({pageNo:1,pageSize:10,keyword:this.form.teacherNo}).then(res=>{
+      addTeacher({pageNo:1,pageSize:10,userNo:this.form.teacherNo}).then(res=>{
         this.getProgress(res.data[0].id)
       })
     },
@@ -64,16 +64,17 @@ export default {
       getProgress({teacherId:id}).then(res=>{
         this.progressData=res.data
         if ( res.data.length>=1 ){
-          res.data.forEach((item,index)=>{
-            if (item.progress==100 && index==res.data.length-1){
-              this.disabled=false
-            }else if (item.progress==100) {
-            }else {
-              this.disabled=true
-              return
+          const isAll = true;
+          res.data.some(item => {
+            if (item.progress != 100) {
+              this.disabled = true;
+              isAll = false;
+              return true;
             }
-          })
-
+          });
+          if (isAll) {
+            this.disabled = false;
+          }
         }
       })
     },

src/views/lecturer/TwoAthentication.vue

@@ -87,7 +87,7 @@ export default {
       })
     },
     addTeacher(){
-      addTeacher({pageNo:1,pageSize:10,keyword:this.form.teacherNo}).then(res=>{
+      addTeacher({pageNo:1,pageSize:10,userNo:this.form.teacherNo}).then(res=>{
         this.getProgress(res.data[0].id)
       })
     },

src/views/lecturer/TwoCoaching.vue

@@ -25,7 +25,7 @@ export default {
   },
   methods:{
     getTeacherList() {
-      addTeacher({pageNo:1,pageSize:100,keyword:''}).then(res=>{
+      addTeacher({pageNo:1,pageSize:20,keyword:''}).then(res=>{
         this.options = res.data.map(item => {
           return { value: item.realName, label: item.realName };
         });

src/views/lecturer/TwoCos.vue

@@ -90,7 +90,7 @@ export default {
       })
     },
     addTeacher(){
-      addTeacher({pageNo:1,pageSize:10,keyword:this.form.teacherNo}).then(res=>{
+      addTeacher({pageNo:1,pageSize:10,userNo:this.form.teacherNo}).then(res=>{
         this.getProgress(res.data[0].id)
       })
     },

src/views/lecturer/TwoFinals.vue

@@ -95,7 +95,7 @@ export default {
       })
     },
     addTeacher(){
-      addTeacher({pageNo:1,pageSize:10,keyword:this.form.teacherNo}).then(res=>{
+      addTeacher({pageNo:1,pageSize:10,userNo:this.form.teacherNo}).then(res=>{
         this.getProgress(res.data[0].id)
       })
     },

src/views/portal/case/Charts.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="charts">
+    <div class="charts_header">
+      <portal-header textColor="#fff"></portal-header>
+      <div class="text">
+        排行榜
+      </div>
+    </div>
+    <div class="charts_content">
+      <div class="charts_item" :style="{justifyContent:recommendRank.length>0?'':'center'}">
+          <div :style="{width:recommendRank.length>0?'':'600px',marginRight:recommendRank.length>0?'':'45px'}" class="charts_item_box charts_bg1">
+            <div class="charts_text">
+              <div class="text">好评榜</div>
+              <el-dropdown trigger="click"  @command="positiveReview">
+                <span class="el-dropdown-link">
+                  {{favorableName}}<i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="total">总</el-dropdown-item>
+                  <el-dropdown-item command="quarter">季度</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+            <ul class="charts_list">
+              <li v-for="(item, index) in Positive" :key="index" class="list">
+                <router-link style="display: flex;align-items: center;" :to="'/case/detail?id=' + item.caseId">
+                  <img class="num" :src="require(
+                    `../../../../public/images/${imgNumBlue(index)}.png`
+                  )" alt="">
+                  <span class="text">{{ item.caseTitle }}</span>
+                </router-link>
+              </li>
+            </ul>
+          </div>
+          <div :style="{width:recommendRank.length>0?'':'600px'}" class="charts_item_box charts_bg2">
+            <div class="charts_text">
+              <div class="text">人气榜</div>
+              <el-dropdown trigger="click"  @command="popularityReview">
+                <span class="el-dropdown-link">
+                  {{popularityName}}<i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="total">总</el-dropdown-item>
+                  <el-dropdown-item command="quarter">季度</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+            <ul class="charts_list">
+              <li v-for="(item, index) in Popularity" :key="index" class="list">
+                <router-link style="display: flex;align-items: center;" :to="'/case/detail?id=' + item.caseId">
+                  <img class="num" :src="require(
+                    `../../../../public/images/${imgNumOrg(index)}.png`
+                  )" alt="">
+                  <span class="text">{{ item.caseTitle }}</span>
+                </router-link>
+              </li>
+            </ul>
+          </div>
+          <div v-if="recommendRank.length > 0" class="charts_item_box charts_bg3">
+            <div class="charts_text">
+              <div class="text">推荐榜</div>
+            </div>
+            <ul class="charts_list">
+              <li v-for="(item, index) in recommendRank" :key="index" class="list">
+                <router-link style="display: flex;align-items: center;" :to="'/case/detail?id=' + item.caseId">
+                  <img class="num" :src="require(
+                    `../../../../public/images/${imgNumPink(index)}.png`
+                  )" alt="">
+                  <span class="text">{{ item.caseTitle }}</span>
+                </router-link>
+              </li>
+            </ul>
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import apiCase from "@/api/modules/cases.js";
+import portalHeader from '@/components/PortalHeader.vue'
+  export default {
+    name: 'charts',
+    components:{portalHeader},
+    data() {
+      return {
+        ankingList: [],//排行数据1
+        Popularity: [],//排行数据2
+        Positive: [],//排行数据3
+        recommendRank: [],
+        switch: {
+          'total': '总',
+          'quarter': '季度',
+        },
+        favorableName: '季度',
+        popularityName: '季度',
+      }
+    },
+    mounted() {
+      this.getPopularity();
+      this.getPositive();
+      this.getQueryRecommendRank()
+    },
+    methods: {
+      getPopularity() {
+        apiCase.queryPraisesNew(10,this.popularityName == '季度' ? 1 : 2).then(res => {
+          if(res.status == 200) {
+            this.Popularity = res.result
+          }
+        })
+      },
+      getPositive() {
+        apiCase.queryCommentsNew(10,this.favorableName == '季度' ? 3 : 4).then(res => {
+          if(res.status == 200) {
+            this.Positive = res.result
+          }
+        })
+      },
+      getQueryRecommendRank(){
+        apiCase.queryRecommendRank(10).then(res => {
+          if(res.status == 200) {
+            this.recommendRank = res.result
+          }
+        })
+      },
+      imgNumBlue(index){
+        return 'listblue0' + (index+1)
+      },
+      imgNumOrg(index){
+        return (
+          index>2?'listblue0' + (index+1):'list0'+(index+1)
+        )
+      },
+      imgNumPink(index){
+        return (
+          index>2?'listblue0' + (index+1):'listred0'+(index+1)
+        )
+      },
+      positiveReview(e){
+        this.favorableName = this.switch[e]
+        this.getPositive()
+      },
+      popularityReview(e){
+        this.popularityName = this.switch[e]
+        this.getPopularity()
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+.el-dropdown-link {
+  cursor: pointer;
+  font-weight: 400;
+  font-size: 14px;
+  color: rgba(51,51,51,0.9);
+}
+.el-icon--right{
+  margin-left: 13px !important;
+}
+.charts{
+  min-height: 100vh;
+  background-color: #F2F5F7;
+  .charts_header{
+    width: 100%;
+    // height: 240px;
+    background: url('../../../../public/images/headerBack.png') no-repeat;
+    background-size: 100% 100%;
+    padding-bottom: 37px;
+    .text{
+      margin-top: 41px;
+      font-weight: 400;
+      font-size: 340%;
+      color: #FFFFFF;
+      padding-left: 98px;
+    }
+  }
+  .charts_content{
+    padding: 52px 91px 58px;
+    .charts_item{
+      display: flex;
+      justify-content: space-between;
+      .charts_item_box{
+        width: 30%;
+        padding: 30px;
+        background-color: #fff;
+        width: 30%;
+        min-height: 716px;
+        margin-right: 30px;
+        .charts_text{
+          display: flex;
+          justify-content: space-between;
+          height: 40px;
+          align-items: center;
+          .text{
+            font-size: 24px;
+            color: #000000;
+          }
+        }
+        .charts_list{
+          .list{
+            cursor: pointer;
+            margin-top:30px;
+            line-height: 22px;
+            .num{
+              width: 25px;
+              height: 30px;
+              margin-right: 10px;
+            }
+            .text{
+              font-weight: 500;
+              font-size: 14px;
+              color: #677D86;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+          }
+        }
+      }
+      .charts_bg1{
+        // width: 100%;
+        height: 100%;
+        background: url('../../../../public/images/qa-box.png') no-repeat;
+        background-size: 100% 100%;
+      }
+      .charts_bg2{
+        // width: 100%;
+        height: 100%;
+        background: url('../../../../public/images/list-or.png') no-repeat;
+        background-size: 100% 100%;
+      }
+      .charts_bg3{
+        // width: 100%;
+        height: 100%;
+        background: url('../../../../public/images/list-pink.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+</style>

src/views/portal/case/Detail.vue

@@ -109,13 +109,28 @@
           </div>
         </div>
         <div class="xcontent2-minor" :style="{ display: zoomShow ? '' : 'none' }">
-          <div>
-            <div id="fixd-box">
-              <div class="portal-ranking ranking-bg">
-                <p class="ranking-title">好评榜</p>
+          <div id="fixd-box">
+            <router-link class="the_charts" to="/case/charts">
+              <div class="text">排行榜</div>
+              <div class="icon">></div>
+            </router-link>
+            <div>
+              <div class="portal-ranking ranking-bg" style="padding: 20px 15px;max-height: 222px;">
+                <div style="display: flex;justify-content: space-between;">
+                  <p class="ranking-title">好评榜</p>
+                  <el-dropdown trigger="click"  @command="positiveReview">
+                    <span class="el-dropdown-link">
+                      {{favorableName}}<i class="el-icon-arrow-down el-icon--right"></i>
+                    </span>
+                    <el-dropdown-menu slot="dropdown">
+                      <el-dropdown-item command="total">总</el-dropdown-item>
+                      <el-dropdown-item command="quarter">季度</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </div>
                 <ul class="ranking-data">
                   <li v-for="(item, index) in Positive" :key="index" class="title-line-ellipsis"
-                    style="cursor: pointer;margin-top:30px;line-height: 22px;" @click="jumpRouter(item)">
+                    style="cursor: pointer;margin-top:15px;line-height: 22px;" @click="jumpRouter(item)">
                     <span class="portal-right-text blue-one" v-if="index == 0">
                       <img :src="`${webBaseUrl}/images/listblue01.png`" alt="">
                     </span>
@@ -131,15 +146,26 @@
                     <span class="portal-right-text" v-if="index == 4">
                       <img :src="`${webBaseUrl}/images/list05.png`" alt="">
                     </span>
-                    <span class="portal-title-desc" style="font-size: 14px;">{{ item.title }}</span>
+                    <span class="portal-title-desc" style="font-size: 14px;">{{ item.caseTitle }}</span>
                   </li>
                 </ul>
               </div>
-              <div style="margin-top:26px" class="portal-ranking ranking-bg1">
-                <p class="ranking-title">人气榜</p>
+              <div style="padding: 20px 15px;max-height: 222px;margin-top: 20px;" class="portal-ranking ranking-bg1">
+                <div style="display: flex;justify-content: space-between;">
+                  <p class="ranking-title">人气榜</p>
+                  <el-dropdown trigger="click"  @command="popularityReview">
+                    <span class="el-dropdown-link">
+                      {{popularityName}}<i class="el-icon-arrow-down el-icon--right"></i>
+                    </span>
+                    <el-dropdown-menu slot="dropdown">
+                      <el-dropdown-item command="total">总</el-dropdown-item>
+                      <el-dropdown-item command="quarter">季度</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </div>
                 <ul class="ranking-data">
                   <li v-for="(item, index) in Popularity" :key="index" class="title-line-ellipsis"
-                    style="cursor: pointer;margin-top:30px;line-height: 22px;" @click="jumpRouter(item)">
+                    style="cursor: pointer;margin-top:15px;line-height: 22px;" @click="jumpRouter(item)">
                     <span class="portal-right-text orange-one" v-if="index == 0">
                       <img :src="`${webBaseUrl}/images/list-01.png`" alt="">
                     </span>
@@ -155,7 +181,27 @@
                     <span class="portal-right-text" v-if="index == 4">
                       <img :src="`${webBaseUrl}/images/list05.png`" alt="">
                     </span>
-                    <span class="portal-title-desc" style="font-size: 14px;">{{ item.title }}</span>
+                    <span class="portal-title-desc" style="font-size: 14px;">{{ item.caseTitle }}</span>
+                  </li>
+                </ul>
+              </div>
+              <div v-if="recommendRank.length > 0" class="portal-ranking ranking-bg2" style="padding: 20px 15px;max-height: 222px;margin-top: 20px;">
+                <p class="ranking-title">推荐榜</p>
+                <ul class="ranking-data">
+                  <li v-for="(item, index) in recommendRank" :key="index" class="title-line-ellipsis"
+                    style="cursor: pointer;margin-top:15px;line-height: 22px;">
+                    <router-link :to="'/case/detail?id=' + item.caseId">
+                      <span class="portal-right-text blue-one" v-if="index == 0">
+                        <img :src="`${webBaseUrl}/images/listred01 .png`" alt="">
+                      </span>
+                      <span class="portal-right-text blue-tow" v-if="index == 1">
+                        <img :src="`${webBaseUrl}/images/listred02.png`" alt="">
+                      </span>
+                      <span class="portal-right-text blue-three" v-if="index == 2">
+                        <img :src="`${webBaseUrl}/images/listred03.png`" alt="">
+                      </span>
+                      <span class="portal-title-desc" style="font-size: 14px;">{{ item.caseTitle }}</span>
+                    </router-link>
                   </li>
                 </ul>
               </div>
@@ -199,6 +245,12 @@ export default {
   },
   data() {
     return {
+      switch: {
+        'total': '总',
+        'quarter': '季度',
+      },
+      favorableName: '季度',
+      popularityName: '季度',
       fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
       resonimg: {},
       Internet: 3,//1是成功 2是是失败 3是检测中
@@ -210,6 +262,7 @@ export default {
       ankingList: [],
       Popularity: [],
       Positive: [],
+      recommendRank: [],
       resolveId: '',
       basePath: process.env.VUE_APP_FILE_BASE_URL,
       pdfPath: '',
@@ -271,6 +324,14 @@ export default {
     this.cumulativeDuration = 0;
   },
   methods: {
+    positiveReview(e){
+      this.favorableName = this.switch[e]
+      this.getPositive()
+    },
+    popularityReview(e){
+      this.popularityName = this.switch[e]
+      this.getPopularity()
+    },
     endTimeRequst(caseId, recordEndTime) {
       console.log(this.dataTime);
       let time = (recordEndTime - this.dataTime) / 1000 / 60
@@ -297,6 +358,7 @@ export default {
       this.getAnkingData();
       this.getPopularity();
       this.getPositive();
+      this.getQueryRecommendRank();
       this.couresreso();
       this.retest();
       window.addEventListener(
@@ -442,13 +504,13 @@ export default {
       // location.href =`${this.webBaseUrl}/case/detail?id=${item.id}`
       // this.$router.push(`/case/detail?id=${item.id}`);
       const currentRoute = this.$router.currentRoute;
-      if (currentRoute.query.id !== item.id) {
-        this.$router.push('/case/detail?id=' + item.id);
+      if (currentRoute.query.id !== item.caseId) {
+        this.$router.push('/case/detail?id=' + item.caseId);
       } else {
         // 结束时间
         let recordEndTime = new Date().getTime()
         this.endTimeRequst(item.id, recordEndTime)
-        location.href = `${this.webBaseUrl}/case/detail?id=${item.id}`
+        location.href = `${this.webBaseUrl}/case/detail?id=${item.caseId}`
       }
     },
     goTop() {
@@ -489,9 +551,9 @@ export default {
       if (pdfTopBox.getBoundingClientRect().top < 1000) {
         document.querySelector('#pdfTopBox').style.cssText = "position:static";
       }
-      if (scrollTop > 630) {
+      if (scrollTop > 240) {
         this.isTopBoxShow = true;
-        document.querySelector('#fixd-box').style.cssText = "position: fixed;top: -400px;width:" + outerWidth + "px";
+        document.querySelector('#fixd-box').style.cssText = "position: fixed;top: 10px;width:" + outerWidth + "px";
       } else {
         document.querySelector('#fixd-box').style.cssText = "position: static";
       }
@@ -505,40 +567,53 @@ export default {
       })
     },
     getPopularity() {
-      apiCase.queryPraises(5).then(res => {
-        if (res.status == 200) {
-          this.Popularity = res.result;
-          if (res.result.length < 5) {
-            for (let i = 0; i = (5 - res.result.length); i++) {
-              this.Popularity.push({
-                authorName: '',
-                count: 1,
-                id: '',
-                title: '',
-              })
-            }
-          }
+      // apiCase.queryPraises(5).then(res => {
+      //   if (res.status == 200) {
+      //     this.Popularity = res.result;
+      //     if (res.result.length < 5) {
+      //       for (let i = 0; i = (5 - res.result.length); i++) {
+      //         this.Popularity.push({
+      //           authorName: '',
+      //           count: 1,
+      //           id: '',
+      //           title: '',
+      //         })
+      //       }
+      //     }
+      //   }
+      // })
+      apiCase.queryPraisesNew(3,this.popularityName == '季度' ? 1 : 2).then(res => {
+        if(res.status == 200) {
+          this.Popularity = res.result
+        }
+      })
+    },
+    getQueryRecommendRank(){
+      apiCase.queryRecommendRank(3).then(res => {
+        if(res.status == 200) {
+          this.recommendRank = res.result
         }
       })
     },
     getPositive() {
-      apiCase.queryComments(5).then(res => {
-        if (res.status == 200) {
-          this.Positive = res.result;
-          if (res.result.length < 5) {
-            for (let i = 0; i = (5 - res.result.length); i++) {
-              this.Positive.push({
-                authorName: '',
-                count: 1,
-                id: '',
-                title: '',
-              })
-            }
-
-          }
-          // console.log(this.Positive);
-
-
+      // apiCase.queryComments(5).then(res => {
+      //   if (res.status == 200) {
+      //     this.Positive = res.result;
+      //     if (res.result.length < 5) {
+      //       for (let i = 0; i = (5 - res.result.length); i++) {
+      //         this.Positive.push({
+      //           authorName: '',
+      //           count: 1,
+      //           id: '',
+      //           title: '',
+      //         })
+      //       }
+      //     }
+      //   }
+      // })
+      apiCase.queryCommentsNew(3,this.favorableName == '季度' ? 3 : 4).then(res => {
+        if(res.status == 200) {
+          this.Positive = res.result
         }
       })
     },
@@ -659,7 +734,32 @@ export default {
     border-radius: 8px;
   }
 }
+.the_charts{
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 10px;
+  font-size: 18px;
+  max-width: 400px;
+  min-width: 260px;
+  height: 47px;
+  background: #DDEDFF;
+  border-radius: 8px;
+  .text{
+    font-size: 18px;
+    color: #387DF7;
+  }
+  .icon{
+    position: absolute;
+    font-size: 18px;
+    color: #387DF7;
+    right: 25px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
 
+}
 .pdftext {
 
   // padding: 0 20px;

src/views/portal/case/Excellent.vue

@@ -0,0 +1,666 @@
+<template>
+  <div class="excellent">
+    <div class="charts_header">
+      <portal-header textColor="#fff"></portal-header>
+      <div class="text">
+        浏览TOP榜单
+      </div>
+    </div>
+    <div class="ex_content">
+      <div class="ex_top">
+        <div class="ex_select">
+          <div class="ex_left">
+            <div style="margin-right: 12px;">
+              <el-select v-model="majorValue" @change="majorChange" placeholder="请选择专业">
+                <el-option
+                  v-for="item in speciDataNew"
+                  :key="item.name"
+                  :label="item.name"
+                  :value="item.code">
+                </el-option>
+              </el-select>
+            </div>
+            <div>
+              <el-select v-model="monthValue" @change="monthChange" placeholder="请选择月份">
+                <el-option
+                  v-for="item in optionsMonth"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+          <div class="ex_right" @click="goCase">返回</div>
+        </div>
+      </div>
+      <div v-if="caseList.list.length != 0" class="data-content">
+        <div v-for="item in caseList.list" :key="item.id" class="case-list">
+          <div class="case-info" style="padding-bottom: 28px;">
+            <div class="case-info-cont">
+              <div @click="toCaseDetail(item.id, item.refId)" style="cursor: pointer;">
+                <div class="case-info-title">
+                  <div class="case-titdiv">
+                    <div class="case-tittext">
+                      <span class="title-line-ellipsis" v-html="item.title"></span>
+                    </div>
+                    <div class="case-activeText">
+                      <!-- <span v-if="item.breCommend" class="comWords"
+                        style="background-color:rgba(232, 139, 72);">荐</span>
+                      <span v-if="item.excellent" class="comWords" style="background-color:red;">最佳</span> -->
+                      <span v-if="item.excellentTag" class="comWords" style="width: 98px;height: 24px;background: #F99000;border-radius: 2px;font-weight: 400;font-size: 12px;color: #FFFFFF;padding: 4px 10px;">
+                        {{item.excellentTag}}
+                      </span>
+                      <span v-if="item.viewRankTags.length != 0" v-for="tag in item.viewRankTags" class="comWords" style="width: 98px;height: 24px;background: #F99000;border-radius: 2px;font-weight: 400;font-size: 12px;color: #FFFFFF;padding: 4px 10px;">
+                        {{tag.tagName}}
+                      </span>
+                    </div>
+                    <div class="case-info-date portal-time">
+                      <i class="el-icon-time"></i>
+                      <time-show :time="item.sysCreateTime"></time-show>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div style="height:58px;padding-top:14px ">
+                <author :avatar="item.authorInfo.avatar" :name="item.authorInfo.name" :info="item.authorInfo.orgInfo"
+                  :sex="item.authorInfo.sex" :authorTags="item.authorTags" :aid="item.authorInfo.aid">
+                  <template>
+                    <div v-if="item.breCommend"
+                      style="padding-top: 6px;flex: 1;display: flex;justify-content: flex-end;color: #999;font-size: 12px;">
+                      <span>{{ item.recommendOrgName }}推荐</span>
+                    </div>
+                  </template>
+                </author>
+              </div>
+              <div @click="toCaseDetail(item.id, item.refId)" style="cursor: pointer;">
+                <div class="keyword-text clearfix">
+                  <div style="color:#2974D6;font-weight: 450;" v-if="item.orgDomainParent">
+                    {{ orgDomainTranslate(item.orgDomainParent) }}
+                  </div>
+                  <div style="color:#2974D6;font-weight: 450;" v-for="(item, idx) in item.majorType" :key="idx">
+                    {{ majorTypeTranslate(item) }}
+                  </div>
+                  <div v-if="item.keyword1">{{ item.keyword1 }}</div>
+                  <div v-if="item.keyword2">{{ item.keyword2 }}</div>
+                  <div v-if="item.keyword3">{{ item.keyword3 }}</div>
+                  <div v-if="item.keyword4">{{ item.keyword4 }}</div>
+                  <div v-if="item.keyword5">{{ item.keyword5 }}</div>
+                </div>
+              </div>
+              <div class="case-info-summary two-line-ellipsis" @click="toCaseDetail(item.id, item.refId)">
+                {{ item.summary }}
+              </div>
+              <!-- <div style="display: flex;justify-content: flex-end;">
+                <div style="margin:8px 0;">
+                  <interactBar :type="3" :data="item" :comments="false" :shares="true"></interactBar>
+                </div>
+              </div> -->
+            </div>
+          </div>
+        </div>
+        <div v-if="caseList.showPagCount > queryCondition.pageSize">
+          <pagination :size="queryCondition.pageSize" :total="caseList.count" :page="queryCondition.pageIndex"
+            layout="total, prev, pager, next, jumper" @change-page="currentChange"></pagination>
+        </div>
+      </div>
+      <div class="pagination-div" v-if="caseList.list.length == 0">
+        <span class="notcoures">
+          <img :src="`${webBaseUrl}/images/nocase.png`" alt="">
+          <h5>暂无案例，请优先学习其它案例吧～</h5>
+        </span>
+      </div>
+      <div v-if="isSeach" style="height:382px">
+      </div>
+    </div>
+  </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 interactBar from "@/components/Portal/interactBar.vue";
+import timeShow from "@/components/Portal/datetimeShow.vue";
+import author from "@/components/Portal/authorInfo.vue";
+import apiCase from "@/api/modules/cases.js";
+import apiUser from "@/api/system/user.js";
+import apiSearchterm from "@/api/modules/searchterm.js";
+import { deepClone } from "../../../utils";
+import apiDict from "@/api/modules/dict.js";
+import apiType from "@/api/modules/type.js";
+import { cutFullName } from "@/utils/tools.js";
+import apiPlace from "@/api/phase2/place.js"
+  export default {
+    name: 'excellent',
+    components: {
+      portalHeader,
+      portalFooter,
+      portalFloatTools,
+      interactBar,
+      timeShow,
+      author
+    },
+    data() {
+      return {
+        majorId: '',
+        rankMonth: '',
+        optionsMonth: [],
+        majorValue: '',
+        monthValue: '',
+        caseList: {
+          count: 0,
+          list: [],
+          showPagCount: 0
+        },
+        isSeach: false,
+        domain: [],//组织领域
+        speciData: [],//专业分类
+        speciDataNew: [],
+        monthsObject: {},
+        treeList:[],
+        queryCondition: {
+          pageIndex: 1,
+          pageSize: 10,
+          majorType: '', //专业分类code
+          excellent: true,
+          keyWord: '',
+          orgDomainDtos: [],
+          caseType: process.env.VUE_APP_CASE_TYPE,
+          authorName: '',
+          notInIds: [],
+          type: 'all',
+          userId: '',
+          parent: '',
+          children: [],
+          name: '',
+          years: [],
+          // 随机
+          notInIds: [],//重复的id
+          orderField: "id",
+          orderAsc: false,//排序
+          sysType1:'',
+          sysType2:'',
+          sysType3:''
+        },
+      }
+    },
+    mounted() {
+      this.majorValue = this.$route.query.majorName
+      const dateStr = this.$route.query.riseRankTime;
+      const year = dateStr.substring(2, 4) + '年';
+      const month = dateStr.substring(5, 7) + '月';
+      this.monthValue = year + month;
+      this.getCaseData()
+      Promise.all([apiType.treeList(1,Number(this.caseType ?? 155),1), apiCase.majorTypes(),apiCase.queryAllTimePopularityOfMajor()]).then(rs => {
+        if (rs[0].code == 200) {
+          const {records} = rs[0].data
+          records.forEach(item => {
+            item.fielclass = false;
+            item.type = 'org_domain';
+            item.list = item.children ? item.children : []
+            if (Array.isArray(item.children)) {
+              item.list.forEach(sub => {
+                sub.list = sub.children ? sub.children : []
+                sub.fielclass = false
+                if (Array.isArray(sub.children)) {
+                  sub.list.forEach(three => {
+                    three.list = three.children ? three.children : []
+                    three.fielclass = false
+                  })
+                }
+              })
+            }
+          })
+          this.domain = records;
+        }
+        if (rs[1].status == 200) {
+          rs[1].result.forEach(item => {
+            item.fielclass = false;
+            item.type = 'major_type';
+          })
+          this.speciData = rs[1].result;
+        }
+        if(rs[2].status == 200){
+          const months = Object.keys(rs[2].result)
+          this.monthsObject = rs[2].result
+          months.forEach(item=>{
+            rs[1].result.forEach(sub=>{
+              if(item == sub.code){
+                this.speciDataNew.push(sub)
+              }
+            })
+          })
+        }
+        this.selectMonth(this.$route.query.majorId)
+      });
+      this.loadTypeData();//加载分类
+    },
+    computed: {
+      tagList() { //列表属性，用于计算
+      let list = [];
+      if (this.keyWord) {
+        list.push({ type: '0', code: 'keyword', name: this.keyWord, checked: true })
+      }
+      this.domain.forEach(one => {
+        var twoChildChecked = false;//是否有下级
+        one.list.forEach(two => {
+          if (two.fielclass) {
+            twoChildChecked = true;
+          }
+          var threeChildChecked = false;
+          two.list.forEach(three => {
+            if (three.fielclass) {
+              list.push(three);
+              threeChildChecked = true;
+            }
+          });
+          if (two.fielclass && !threeChildChecked) {
+            list.push(two);
+          }
+        });
+        if (one.fielclass && !twoChildChecked) {
+          list.push(one);
+        }
+      })
+      this.speciData.forEach(item => {
+        if (item.fielclass) {
+          list.push(item);
+        }
+      });
+      this.treeList.forEach(one => {
+        var twoChildChecked = false;//是否有下级
+        one.children && one.children.forEach(two => {
+          if (two.checked) {
+            twoChildChecked = true;
+          }
+          var threeChildChecked = false;
+          two.children  && two.children.forEach(three => {
+            if (three.checked) {
+              list.push(three);
+              threeChildChecked = true;
+            }
+          });
+          if (two.checked && !threeChildChecked) {
+            list.push(two);
+          }
+        });
+        if (one.checked && !twoChildChecked) {
+          list.push(one);
+        }
+      })
+
+      return list;
+    },
+    },
+    methods: {
+      selectMonth(e){
+        this.optionsMonth = this.monthsObject[e].map(item=>{
+          return {
+            value: item,
+            label: item.split('-')[0]+'年'+item.split('-')[1]+'月'
+          }
+        })
+      },
+      majorChange(e){
+        this.selectMonth(e)
+        this.majorId = e
+        this.rankMonth = '20' + this.optionsMonth[0].value + '-' + '20'
+        this.monthValue = this.optionsMonth[0].label
+        this.getCaseData()
+      },
+      monthChange(e){
+        this.rankMonth ='20' + e + '-' + '20'
+        this.getCaseData()
+      },
+      orgDomainTranslate(code) { // 组织领域翻译
+        if (code == '') {
+          return
+        }
+        let name = '';
+        let data = this.domain.find(item => {
+          return item.code == code;
+        });
+        if (data) {
+          name = data.name;
+        }
+        return name;
+      },
+      majorTypeTranslate(code) { // 专业分类翻译
+        let name = '';
+        let data = this.speciData.find(item => item.code == code);
+        if (data) {
+          name = data.name;
+        }
+        return name;
+      },
+      async loadTypeData() {
+        try {
+          const { result, status } = await apiType.tree(1);
+          if (status === 200) {
+            result.forEach(one => {
+              one.checked = false;
+              if(!one.children) one.children = []
+              one.children && one.children.forEach(two => {
+                two.checked = false;
+                if(!two.children) two.children = []
+                two.children && two.children.forEach(three => {
+                  three.checked = false;
+                  if(!three.children) three.children = []
+                })
+              })
+            })
+            this.treeList = result
+          }
+        } catch (error) {
+          // console.log(error);
+        }
+      },
+      goCase() {
+        this.$router.go(-1);
+      },
+      toCaseDetail(id, refId) {
+        if (refId) {
+          apiCase.startReadTimer(refId)
+        }
+        this.$router.push({ path: '/case/detail', query: { id } });
+      },
+      getAllFielclass() { //获取全部选中的标签
+        let newlist = JSON.parse(JSON.stringify(this.domain))
+        return newlist.filter(one => {
+          one.list = one.list.filter(two => {
+            two.list = two.list.filter(three => {
+              return three.fielclass;
+            })
+            return two.fielclass;
+          });
+          return one.fielclass
+        })
+      },
+      currentChange(val) {
+        this.caseList.showPagCount = 0
+        this.queryCondition.pageIndex = val
+        this.getCaseData()
+      },
+      getCaseUserData(caseList) {
+        let ids = caseList.map((item, index) => {
+          return item.authorId;
+        });
+        //不能为空
+        if (!ids.length) return
+
+        const noReapetIds = [...new Set(ids)];
+        apiUser.getByIds(noReapetIds).then(res => {
+          if (res.status == 200) {
+            caseList.forEach((item, index) => {
+              res.result.some(author => {
+                if (author.aid == item.authorId) {
+                  item.authorInfo = author;
+                  author.orgInfo = cutFullName(author.orgInfo, 1);
+                  return true;
+                } else {
+                  return false;
+                }
+              });
+            });
+          } else {
+            this.$message.error(res.message);
+          }
+        });
+      },
+      async getCaseData() {
+        let majorTypeList = [];
+        let allFielclass = JSON.parse(JSON.stringify(this.getAllFielclass()));
+        // 获取树状id
+        this.queryCondition.orgDomainDtos = allFielclass.map(item => {
+          item.list = item.list.map(two => {
+            two.list = two.list.map(three => {
+              return {
+                parent: three.code
+              }
+            })
+            return {
+              parent: two.code,
+              children: two.list || []
+            }
+          })
+          return {
+            parent: item.code,
+            children: item.list || []
+          }
+        })
+        // 专业分类的id
+        this.tagList.forEach(tag => {
+          if (tag.type == '0') {
+            this.queryCondition.keyWord = tag.name;
+          } else if (tag.type == 'major_type') {
+            majorTypeList.push(tag.code);
+          }
+        });
+        this.queryCondition.majorType = majorTypeList.join(',');
+        this.queryCondition.majorId = this.majorId || this.$route.query.majorId
+        this.queryCondition.rankMonth = (this.rankMonth || this.$route.query.riseRankTime) + ' 00:00:00'
+        await apiCase.queryPopularityOfMajor(this.queryCondition).then((res) => {
+          if (res.status == 200) {
+            if (res.result.length > 0) {
+              this.isSeach = false;
+              res.result.forEach(item => {
+                item.majorType = item.majorType ? item.majorType.split(",") : [];
+                item.isAll = false;
+                item.authorInfo = {
+                  aid: "",
+                  name: "",
+                  orgInfo: "",
+                  avatar: "",
+                  sex: null
+                };
+              });
+            }
+            res.result.forEach(item=>{
+              item.viewRankTags = item.viewRankTags.slice(0,2)
+            })
+            this.caseList.list = res.result
+            if(this.caseList.length == 0){
+              this.isSeach = true
+            }else{
+              this.isSeach = false
+            }
+            this.getCaseUserData(res.result);
+            // 给所有的赋值
+            this.caseList.count = res.result.count;
+            this.caseList.showPagCount = res.result.count;
+          } else {
+            this.$message.error(res.message);
+          }
+        }).catch(err => {
+          // console.log(err);
+        });
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+.keyword-text {
+
+  div {
+    padding: 0px 8px;
+    margin-top: 5px;
+    float: left;
+    line-height: 24px;
+    font-size: 12px;
+    border-radius: 2px;
+    margin-right: 8px;
+    color: #2C68FF;
+    height: 24px;
+    background: rgba(44, 104, 255, 0.06);
+  }
+}
+.case-titdiv {
+  line-height: 30px;
+  display: flex;
+
+  .case-tittext {
+    font-size: 18px;
+    font-weight: 600;
+    color: #333333;
+    max-width: 67%;
+  }
+
+  .case-activeText {
+    line-height: 27.5px;
+
+    .comWords {
+      color: white;
+      font-size: 12px;
+      border-radius: 2px;
+      padding: 2px 4px;
+      margin-left: 20px;
+    }
+
+  }
+}
+.excellent{
+  background-color: #F2F5F7;
+  min-height: 100vh;
+  .charts_header{
+    width: 100%;
+    // height: 240px;
+    background: url('../../../../public/images/headerBack.png') no-repeat;
+    background-size: 100% 100%;
+    padding-bottom: 37px;
+    .text{
+      margin-top: 41px;
+      font-weight: 400;
+      font-size: 340%;
+      color: #FFFFFF;
+      padding-left: 98px;
+    }
+  }
+
+  .ex_content{
+    padding: 31px 90px 103px;
+    .ex_top{
+      background-color: #F2F5F7;
+      margin-bottom: 15px;
+      .ex_text{
+        font-size: 20px;
+        color: #fff;
+        margin-bottom: 10px;
+      }
+      .ex_select{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .ex_left{
+          display: flex;
+        }
+        .ex_right{
+          width: 71px;
+          height: 38px;
+          background: #2478FF;
+          border-radius: 4px;
+          text-align: center;
+          line-height: 38px;
+          cursor: pointer;
+          color: #fff;
+        }
+      }
+    }
+    .data-content {
+      background-color: #fff;
+      padding: 5px 50px;
+
+      ::v-deep .interact-bar-btns {
+        .interact-bar-btn {
+          text-align: right;
+          min-width: 78px !important;
+          margin-right: 0;
+        }
+      }
+
+      .case-list:last-child {
+        border-bottom: none;
+      }
+
+      .case-list {
+        border-bottom: 1px solid rgba(153, 153, 153, .2);
+        margin-top: 10px;
+        margin-bottom: 25px;
+        padding-left: 5px;
+        padding-right: 5px;
+      }
+
+      .case-image {
+        width: 230px;
+        height: 170px;
+        float: left;
+        border: 1px solid #eee;
+      }
+
+      .case-info {
+        .case-info-cont {
+          .case-info-title {
+            font-size: 15px;
+            color: #333;
+            font-weight: 600;
+            height: 30px;
+
+            .case-info-date {
+              flex: 1;
+              text-align: right;
+              font-weight: normal;
+
+              // font-size: 12px;
+              // height: 30px;
+              // font-weight: 200;
+              // color: #8590a6;
+              i {
+                margin-right: 5px;
+              }
+            }
+          }
+
+          .case-info-summary {
+            margin-top: 16px;
+            cursor: pointer;
+            margin-bottom: 5px;
+            word-break: break-all;
+            line-height: 24px;
+            font-size: 14px;
+            color: #333330;
+            font-weight: 400;
+          }
+
+          .case-info-tools {
+            height: 30px;
+
+            .case-info-tools-auth {
+              float: left;
+              font-size: 13px;
+              color: #999999;
+
+              img {
+                margin-right: 10px;
+                width: 30px;
+                border: 1px solid #eee;
+                border-radius: 50%;
+                vertical-align: middle;
+              }
+            }
+
+            .case-info-tools-btns {
+              float: right;
+
+              .case-info-tools-btn {
+                margin: 0 0 0 15px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>