案例优化，页面实现，

src/components/Portal/authorInfo.vue

@@ -15,6 +15,7 @@
 		<div v-if="!onlyAvatar" 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 class="comWords">20篇最佳案例</span>
     </div>
     <slot />
 	</div>
@@ -119,6 +120,14 @@
       font-weight: 300;
       margin-left: 4px;
     }
+    .comWords {
+      color: #999;
+      font-size: 12px;
+      border-radius: 2px;
+      padding: 2px 14px;
+      margin-left: 20px;
+      background-color: bisque;
+    }
     .uavatar{
       // border: 1px solid #73adfe;
       width: 28px;

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/portal/case/Charts.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="charts">
+    <div class="charts_header">
+      排行榜
+    </div>
+    <div class="charts_content">
+      <div class="charts_item">
+          <div class="charts_item_box">
+            <div class="charts_text">
+              <div class="text">好评榜</div>
+              <div>季度</div>
+            </div>
+            <ul class="charts_list">
+              <li v-for="(item, index) in Positive" :key="index" class="list">
+                <router-link :to="'/case/detail?id=' + item.id">
+                  <span class="num" :style="{color:listTextColor(index)}">{{ index + 1}}</span>
+                  <span>{{ item.title }}</span>
+                </router-link>
+              </li>
+            </ul>
+          </div>
+          <div class="charts_item_box">
+            <div class="charts_text">
+              <div class="text">人气榜</div>
+              <div>季度</div>
+            </div>
+            <ul class="charts_list">
+              <li v-for="(item, index) in Popularity" :key="index" class="list">
+                <router-link :to="'/case/detail?id=' + item.id">
+                  <span class="num" :style="{color:listTextColor(index)}">{{ index + 1}}</span>
+                  <span>{{ item.title }}</span>
+                </router-link>
+              </li>
+            </ul>
+          </div>
+          <div class="charts_item_box">
+            <div class="charts_text">
+              <div class="text">推荐榜</div>
+            </div>
+            <ul class="charts_list">
+              <li v-for="(item, index) in Positive" :key="index" class="list">
+                <router-link :to="'/case/detail?id=' + item.id">
+                  <span class="num" :style="{color:listTextColor(index)}">{{ index + 1}}</span>
+                  <span>{{ item.title }}</span>
+                </router-link>
+              </li>
+            </ul>
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import apiCase from "@/api/modules/cases.js";
+  export default {
+    name: 'charts',
+    data() {
+      return {
+        ankingList: [],//排行数据1
+        Popularity: [],//排行数据2
+        Positive: [],//排行数据3
+        colorList: ['#FF0000','#FFA500','#FFFF00']
+      }
+    },
+    mounted() {
+      this.getPopularity();
+      this.getPositive();
+    },
+    methods: {
+      getPopularity() {
+        apiCase.queryPraises(5).then(res => {
+          if (res.status == 200) {
+            this.Popularity = res.result;
+            console.log(this.Popularity,'this.Popularity')
+          }
+        });
+      },
+      getPositive() {
+        apiCase.queryComments(5).then(res => {
+          if (res.status == 200) {
+            this.Positive = res.result;
+            console.log(this.Positive,'this.Positive');
+          }
+        });
+      },
+      listTextColor(index){
+        return this.colorList[index]
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+.charts{
+  min-height: 100vh;
+  background-color: #999;
+  .charts_header{
+    font-size: 18px;
+    background-color: #387DF7;
+    color: #fff;
+    height: 72px;
+    line-height: 72px;
+    padding-left: 40px;
+    margin-bottom: 20px;
+  }
+  .charts_content{
+   
+    .charts_item{
+      display: flex;
+      justify-content: center;
+      .charts_item_box{
+        padding: 10px 20px;
+        background-color: #fff;
+        width: 30%;
+        margin-right: 30px;
+        .charts_text{
+          display: flex;
+          justify-content: space-between;
+          height: 40px;
+          align-items: center;
+          .text{
+            font-size: 18px;
+            font-weight: 600;
+          }
+        }
+        .charts_list{
+          .list{
+            cursor: pointer;
+            margin-top:30px;
+            line-height: 22px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            .num{
+              margin-right: 8px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/portal/case/Excellent.vue

@@ -0,0 +1,614 @@
+<template>
+  <div class="excellent">
+    <div class="ex_top">
+      <div class="ex_text">浏览TOP榜单</div>
+      <div class="ex_select">
+        <div class="ex_left">
+          <div style="margin-right: 15px;">
+            <el-select clearable v-model="majorValue" placeholder="请选择专业">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+          <div>
+            <el-select clearable v-model="monthValue" placeholder="请选择月份">
+              <el-option
+                v-for="item in options"
+                :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 class="ex_content">
+      <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">
+            <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" @click.stop="toExcellent(item)">
+                      <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 class="comWords" style="background-color:orange">2024年度最佳</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" :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">
+        <span class="notcoures" v-if="caseList.list.length == 0">
+          <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 {
+        options: [{
+          value: '选项1',
+          label: '黄金糕'
+        }, {
+          value: '选项2',
+          label: '双皮奶'
+        }, {
+          value: '选项3',
+          label: '蚵仔煎'
+        }, {
+          value: '选项4',
+          label: '龙须面'
+        }, {
+          value: '选项5',
+          label: '北京烤鸭'
+        }],
+        majorValue: '',
+        monthValue: '',
+        caseList: {
+          count: 0,
+          list: [],
+          showPagCount: 0
+        },
+        isSeach: false,
+        domain: [],//组织领域
+        speciData: [],//专业分类
+        treeList:[],
+        queryCondition: {
+          pageIndex: 1,
+          pageSize: 5,
+          majorType: '', //专业分类code
+          excellent: true,
+          keyWord: '',
+          orgDomainDtos: [],
+          caseType: '',
+          authorName: '',
+          notInIds: [],
+          type: 'all',
+          userId: '',
+          parent: '',
+          children: [],
+          name: '',
+          years: [],
+          // 随机
+          notInIds: [],//重复的id
+          orderField: "id",
+          orderAsc: false,//排序
+          sysType1:'',
+          sysType2:'',
+          sysType3:''
+        },
+      }
+    },
+    mounted() {
+      this.getCaseData()
+      Promise.all([apiType.treeList(1,Number(this.caseType ?? 155),1), apiCase.majorTypes()]).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;
+        }
+      });
+      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);
+        }
+      })
+      console.log(list,'计算属性');
+
+      return list;
+    },
+    },
+    methods: {
+      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(',');
+        await apiCase.queryListV2(this.queryCondition).then((res) => {
+          if (res.status == 200) {
+            if (res.result.list.length > 0) {
+              this.isSeach = false;
+              res.result.list.forEach(item => {
+                item.majorType = item.majorType ? item.majorType.split(",") : [];
+                item.isAll = false;
+                item.authorInfo = {
+                  aid: "",
+                  name: "",
+                  orgInfo: "",
+                  avatar: "",
+                  sex: null
+                };
+              });
+            }
+            console.log(res?.result?.list ,'有没有数据');
+            this.caseList.list = res.result.list
+            if(this.caseList.list.length == 0){
+              this.isSeach = true
+            }else{
+              this.isSeach = false
+            }
+            this.getCaseUserData(res.result.list);
+            // 给所有的赋值
+            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: #999;
+  min-height: 100vh;
+  .ex_top{
+    background-color: #387df7;
+    padding: 10px 30px 10px 40px;
+    margin-bottom: 20px;
+    .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{
+        background-color: #fff;
+        width: 60px;
+        height: 30px;
+        text-align: center;
+        line-height: 30px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .ex_content{
+    width: 80%;
+    margin: 0 auto;
+    .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>

src/views/portal/case/Index.vue

@@ -139,25 +139,53 @@
           <div style="height:30px;background-color:#f6f7fc;"></div>
           <div class="order-div" style="border-bottom:none">
             <span class="quyer-tag">
+              <el-button type="text" class="order-class" @click="searchexcellent('all')"
+                :class="{ actice: queryCondition.type == 'all' }">全部</el-button>
               <el-button type="text" class="order-class" @click="searchexcellent('excellent')"
-                :class="{ actice: queryCondition.type == 'excellent' }">最佳案例</el-button>
+                :class="{ actice: queryCondition.type == 'excellent' }">年度最佳</el-button>
               <el-button type="text" class="order-class" @click="searchexcellent('recommend')"
                 :class="{ actice: queryCondition.type == 'recommend' }">推荐案例</el-button>
-              <el-button type="text" class="order-class" @click="searchexcellent('hot')"
+              <!-- <el-button type="text" class="order-class" @click="searchexcellent('hot')"
                 :class="{ actice: queryCondition.type == 'hot' }">最热</el-button>
               <el-button type="text" class="order-class" @click="searchexcellent('new')"
-                :class="{ actice: queryCondition.type == 'new' }">最新</el-button>
+                :class="{ actice: queryCondition.type == 'new' }">最新</el-button> -->
             </span>
             <div style="flex: 1; display: flex; justify-content: flex-end;align-items: center;">
-              <div style="margin-right: 20px;color: #6E7B84;font-size: 14px;">当前已检索 <span style="color:#387DF7;">
-                  {{ caseList.count }}</span> 条数据</div>
+              <!-- <div style="margin-right: 20px;color: #6E7B84;font-size: 14px;">当前已检索 <span style="color:#387DF7;">
+                  {{ caseList.count }}</span> 条数据</div> -->
+              <div class="pub_time" @click="searchTime">
+                <div>发布时间</div>
+                <div class="triangle">
+                  <div :style="{borderBottomColor:pubTimeNum===2?'#00f':'#DCDFE6'}" class="up-triangle"></div>
+                  <div :style="{borderTopColor:pubTimeNum===1?'#00f':'#DCDFE6'}" class="down-triangle"></div>
+                </div>
+              </div>
+              <div class="pub_time" @click="searchPageView">
+                <div>浏览量</div>
+                <div class="triangle">
+                  <div :style="{borderBottomColor:pageViewNum===2?'#00f':'#DCDFE6'}" class="up-triangle"></div>
+                  <div :style="{borderTopColor:pageViewNum===1?'#00f':'#DCDFE6'}" class="down-triangle"></div>
+                </div>
+              </div>
               <el-select v-model="years" multiple collapse-tags
                 style="margin-left: 20px; width: 147px; border-radius:20px !important;" placeholder="全部年份">
                 <el-option v-for="item in caseYears" :key="item.value" :label="item.label" :value="item.value">
                 </el-option>
               </el-select>
+              <div :class="queryCondition.type == 'collect' ? 'collect_active': 'collect'" @click="searchexcellent('collect')">
+                <div class="png"></div>
+                <div class="text">收藏案例</div>
+              </div>
+              <div :class="queryCondition.type == 'time' ? 'time_active': 'time'" @click="searchexcellent('time')">
+                <div class="png"></div>
+                <div class="text">浏览记录</div>
+              </div>
             </div>
           </div>
+          <div class="search_div_num">
+            当前已检索 <span style="color:#f00;">
+              {{ caseList.count }}</span> 条数据
+          </div>
           <div class="data-content">
             <div v-for="item in caseList.list" :key="item.id" class="case-list">
               <div class="case-info">
@@ -169,10 +197,11 @@
                         <div class="case-tittext">
                           <span class="title-line-ellipsis" v-html="item.title"></span>
                         </div>
-                        <div class="case-activeText">
+                        <div class="case-activeText" @click.stop="toExcellent(item)">
                           <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 class="comWords" style="background-color:orange">2024年度最佳</span>
                         </div>
                         <div class="case-info-date portal-time">
                           <i class="el-icon-time"></i>
@@ -250,6 +279,10 @@
       </div>
       <!-- 打开排行榜 -->
       <div class="xcontent2-minor">
+        <router-link class="the_charts" to="/case/charts">
+          <div class="text">排行榜</div>
+          <div class="icon">></div>
+        </router-link>
         <div id="fixd-box">
           <div class="portal-ranking ranking-bg">
             <p class="ranking-title">好评榜</p>
@@ -303,6 +336,32 @@
               </li>
             </ul>
           </div>
+          <div class="portal-ranking ranking-bg" style="margin-top:26px">
+            <p class="ranking-title">推荐榜</p>
+            <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;">
+                <router-link :to="'/case/detail?id=' + item.id">
+                  <span class="portal-right-text blue-one" v-if="index == 0">
+                    <img :src="`${webBaseUrl}/images/listblue01.png`" alt="">
+                  </span>
+                  <span class="portal-right-text blue-tow" v-if="index == 1">
+                    <img :src="`${webBaseUrl}/images/listblue02.png`" alt="">
+                  </span>
+                  <span class="portal-right-text blue-three" v-if="index == 2">
+                    <img :src="`${webBaseUrl}/images/listblue03.png`" alt="">
+                  </span>
+                  <span class="portal-right-text" v-if="index == 3">
+                    <img :src="`${webBaseUrl}/images/list04.png`" alt="">
+                  </span>
+                  <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>
+                </router-link>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
       <div style="height: 50px;"></div>
@@ -399,6 +458,8 @@ export default {
   },
   data() {
     return {
+      pubTimeNum: 0,
+      pageViewNum: 0,
       twoId:'',
       treeList:[],
       caseType:process.env.VUE_APP_CASE_TYPE,//类型
@@ -818,6 +879,10 @@ export default {
       }
       this.$router.push({ path: '/case/detail', query: { id } });
     },
+    toExcellent(item){
+      console.log(item,'xixi')
+      this.$router.push({path:'/case/excellent',query:{id:item.id}})
+    },
     tylClick() {
       window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
     },
@@ -1119,6 +1184,26 @@ export default {
       this.isSeach = true;
       this.search(true);
     },
+    searchTime(){
+      this.pubTimeNum++
+      if(this.pubTimeNum>2){
+        this.pubTimeNum = 0;
+      }
+      if(this.pubTimeNum != 0){
+        this.pageViewNum = 0;
+      }
+      this.search(true);
+    },
+    searchPageView(){
+      this.pageViewNum++
+      if(this.pageViewNum>2){
+        this.pageViewNum = 0;
+      }
+      if(this.pageViewNum != 0){
+        this.pubTimeNum = 0;
+      }
+      this.search(true);
+    },
     searchexcellent(num) {
       if(this.queryCondition.type==num){
         this.queryCondition.excellent =false;
@@ -1289,6 +1374,8 @@ export default {
       //   this.caseList.list = [];
       // }
       this.moreState = 2;
+      this.queryCondition.pubTimeNum = this.pubTimeNum
+      this.queryCondition.pageViewNum = this.pageViewNum
       await apiCase.queryListV2(this.queryCondition).then((res) => {
         if (res.status == 200) {
           if (res.result.list.length > 0) {
@@ -1510,6 +1597,20 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.the_charts{
+    display: flex;
+    margin-bottom: 10px;
+    color: #000;
+    font-weight: 600;
+    font-size: 18px;
+    .text{
+      margin-right: 20px;
+    }
+    .icon{
+
+    }
+
+  }
 // 课程分类
 .course-title-style {
   position: relative;
@@ -2095,8 +2196,99 @@ export default {
     display: flex;
     align-items: center;
     // margin-bottom: ;
+    .pub_time{
+      display: flex;
+      margin-right: 15px;
+      cursor: pointer;
+      .triangle{
+        margin-left: 5px;
+        .up-triangle{
+          width: 0;
+          height: 0;
+          border-left: 5px solid transparent;
+          border-right: 5px solid transparent;
+          border-bottom: 10px solid #DCDFE6;
+          margin-bottom: 2px;
+        }
+        .down-triangle{
+          width: 0;
+          height: 0;
+          border-left: 5px solid transparent;
+          border-right: 5px solid transparent;
+          border-top: 10px solid #DCDFE6;
+        }
+      }
+    }
+    .time{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-left: 15px;
+      .png{
+        width: 20px;
+        height: 20px;
+        background: url('../../../assets/images/time.png') no-repeat;
+        background-size: 100%;
+      }
+      .text{
+        color: #6E7B84;
+      }
+    }
+    .time_active{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-left: 15px;
+      .png{
+        width: 20px;
+        height: 20px;
+        background: url('../../../assets/images/time_active.png') no-repeat;
+        background-size: 100%;
+      }
+      .text{
+        color: #387DF7;
+      }
+    }
+    .collect{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-left: 15px;
+      .png{
+        width: 22px;
+        height: 22px;
+        background: url('../../../assets/images/collect.png') no-repeat;
+        background-size: 100%;
+      }
+      .text{
+        color: #6E7B84;
+      }
+    }
+    .collect_active{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-left: 15px;
+      .png{
+        width: 22px;
+        height: 22px;
+        background: url('../../../assets/images/collect_active.png') no-repeat;
+        background-size: 100%;
+      }
+      .text{
+        color: #387DF7;
+      }
+    }
   }
 
+  .search_div_num{
+    height: 26px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: deepskyblue;
+    color: #387DF7;
+  }
   .data-content {
     background-color: #fff;
     padding: 5px 50px;