案例排行榜和pdf文件

src/views/portal/case/Index.vue

@@ -144,27 +144,92 @@
          </el-row>
       </div>
       <div style="width: 245px;margin-left: 5px;">
-        <div id="fixd-box">
-           <el-card class="ranking-card">
-            <div slot="header">
-              <span>排行榜</span>
-            </div>
-            <div>
-              <el-row class="ranking-title" v-for="(item,index) in ankingList" :key="index">
-                <el-col :span="6">
+        <div>
+           <div id="fixd-box">
+             <el-card class="ranking-card" >
+              <div slot="header">
+                <span style="font-size: 14px;font-weight: 600;color: #333333;">好评榜</span>
+              </div>
+              <div style="padding-bottom:10px">
+                <el-row class="ranking-title">
+                  <!-- <el-col :span="15" style="color: #333333;font-size: 14px;">名称</el-col> -->
+                  <!-- <el-col :offset="4" :span="5" class="center" style="color: #333333;font-size: 14px;">分数</el-col> -->
+                </el-row>
+                <el-row class="ranking-title  bacolor" v-for="(item, index) in ankingList" :key="index" >
+                  <el-col :span="6" style="height:34px">
                     <img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
                     <img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
                     <img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
-                </el-col>
-                <el-col class="center" :span="18">{{item.sysCreateUname}}</el-col>
-                <!-- <el-col class="center" :span="7">{{''}}</el-col>
-                <el-col class="center" :span="7">{{item.counts}}</el-col> -->
-              </el-row>
-            </div>
-          </el-card>
+                    <span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
+                  </el-col>
+                  <el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.sysCreateUname" placement="top-start">
+                        <el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.sysCreateUname }}</el-col>
+                  </el-tooltip>
+                  <!-- <el-col class="center" style="color: #FF8E00;" :span="5">{{ item.score }}</el-col> -->
+                </el-row>
+              </div>
+            </el-card>
+                <div style="height: 10px;"></div>
+              <el-card class="ranking-card" >
+              <div slot="header">
+                <span style="font-size: 14px;font-weight: 600;color: #333333;">人气榜</span>
+              </div>
+              <div style="padding-bottom:10px">
+                <el-row class="ranking-title">
+                  <!-- <el-col :span="15" style="color: #333333;font-size: 14px;">名称</el-col> -->
+                  <!-- <el-col :offset="4" :span="5" class="center" style="color: #333333;font-size: 14px;">分数</el-col> -->
+                </el-row>
+                <el-row class="ranking-title  bacolor" v-for="(item, index) in Popularity" :key="index" >
+                  <el-col :span="6" style="height:34px">
+                    <img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
+                    <img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
+                    <img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
+                    <span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
+                  </el-col>
+                  <el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.title" placement="top-start">
+                        <el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.title }}</el-col>
+                  </el-tooltip>
+                  <!-- <el-col class="center" style="color: #FF8E00;" :span="5">{{ item.score }}</el-col> -->
+                </el-row>
+              </div>
+            </el-card>
+             <div style="height: 10px;"></div>
+              <el-card class="ranking-card" >
+              <div slot="header">
+                <span style="font-size: 14px;font-weight: 600;color: #333333;">人气榜</span>
+              </div>
+              <div style="padding-bottom:10px">
+                <el-row class="ranking-title">
+                  <!-- <el-col :span="15" style="color: #333333;font-size: 14px;">名称</el-col> -->
+                  <!-- <el-col :offset="4" :span="5" class="center" style="color: #333333;font-size: 14px;">分数</el-col> -->
+                </el-row>
+                <el-row class="ranking-title  bacolor" v-for="(item, index) in Positive" :key="index" >
+                  <el-col :span="6" style="height:34px">
+                    <img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
+                    <img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
+                    <img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
+                    <span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
+                  </el-col>
+                  <el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.title" placement="top-start">
+                        <el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.title }}</el-col>
+                  </el-tooltip>
+                  <!-- <el-col class="center" style="color: #FF8E00;" :span="5">{{ item.score }}</el-col> -->
+                </el-row>
+              </div>
+            </el-card>
+
+
+           </div>
+
+
         </div>
+        
+
          
+
+
       </div>
+      
       <el-row :gutter="10">
       </el-row>
       <div style="height: 50px;"></div>
@@ -198,6 +263,7 @@ 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 apiDict from "@/api/modules/dict.js";
 export default {
   name: 'index',
   components: { portalHeader, portalFooter, portalFloatTools, interactBar,timeShow ,author},
@@ -219,6 +285,8 @@ export default {
         list:[]
       },
       ankingList:[],
+      Popularity:[],
+      Positive:[],
       protocolDialogVisible: false,
       protocolConfirmButton:true,
       queryCondition:{
@@ -244,7 +312,9 @@ export default {
     }
     this.keyWord = this.$route.query.keyword;
     this.getAnkingData()
+    this.getPopularity()
     this.searchterm()
+    this.getPositive()
     this.getCaseData();
     window.addEventListener(
       "scroll",
@@ -377,17 +447,78 @@ export default {
       });
     },
     getAnkingData(){
-      apiCase.usernameList(10).then(res=>{
+      apiCase.usernameList(5).then(res=>{
         if(res.status==200){
           this.ankingList=res.result
+        //  console.log(res)
         }
       })
+    },
+    getPopularity(){
+      apiCase.queryPraises(5).then(res=>{
+        if(res.status==200){
+          this.Popularity=res.result
+          // console.log(this.Popularity)
+        }
+      })
+    },
+    getPositive(){
+      apiCase.queryComments(5).then(res=>{
+        if(res.status==200){
+          this.Positive=res.result
+           console.log(res)
+        }
+      })
+    },
+
+    jumpRouter(item){
+        this.$router.push(`/case/detail?id=${item.id}`);
+
     }
+
+
   }
 };
 </script>
 
 <style scoped lang="scss">
+.ranking-title {
+     line-height: 34px;
+    font-size: 15px;
+    color: #333333;
+    .center-titlt{
+      font-size: 15px;
+      color: #333333;
+    }
+    .center{
+      text-align: right;
+    }
+    img{
+      margin-top: 5px;
+    }
+  }
+::v-deep .title-line-ellipsis{
+  // width: 100%;
+   display: -webkit-box;
+   overflow: hidden;
+  text-overflow:ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  box-sizing: border-box;
+  word-break:break-all;
+}
+::v-deep .el-card__body{
+  padding: 0;
+}
+::v-deep .bacolor:nth-child(odd){
+  background-color: #fff;
+  padding: 0 5px;
+}
+::v-deep .bacolor:nth-child(even){
+  background-color: #f6f6f6;
+  padding: 0 5px;
+
+}
 ::v-deep .el-card{
   border: none;
   border-radius: 0px;
@@ -598,8 +729,7 @@ export default {
       text-align: center;
     }
   }
-  .ranking-title {
-  }
+  
   .aligh-title{
     font-size: 14px;
     color: #333333;