案例优化页面UI调整

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/Portal/authorInfo.vue

@@ -121,12 +121,12 @@
       margin-left: 4px;
     }
     .comWords {
-      color: #999;
+      background: #409EFF;
-      font-size: 12px;
       border-radius: 2px;
-      padding: 2px 14px;
+      font-weight: 400;
-      margin-left: 20px;
+      font-size: 12px;
-      background-color: bisque;
+      color: #FFFFFF;
+      padding: 3px 10px 4px 8px;
     }
     .uavatar{
       // border: 1px solid #73adfe;

src/views/portal/case/Charts.vue

@@ -1,47 +1,72 @@
 <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">
-          <div class="charts_item_box">
+          <div class="charts_item_box charts_bg1">
             <div class="charts_text">
               <div class="text">好评榜</div>
-              <div>季度</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 :to="'/case/detail?id=' + item.id">
+                <router-link style="display: flex;align-items: center;" :to="'/case/detail?id=' + item.id">
-                  <span class="num" :style="{color:listTextColor(index)}">{{ index + 1}}</span>
+                  <img class="num" :src="require(
-                  <span>{{ item.title }}</span>
+                    `../../../../public/images/${imgNumBlue(index)}.png`
+                  )" alt="">
+                  <span class="text">{{ item.title }}</span>
                 </router-link>
               </li>
             </ul>
           </div>
-          <div class="charts_item_box">
+          <div class="charts_item_box charts_bg2">
             <div class="charts_text">
               <div class="text">人气榜</div>
-              <div>季度</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 :to="'/case/detail?id=' + item.id">
+                <router-link style="display: flex;align-items: center;" :to="'/case/detail?id=' + item.id">
-                  <span class="num" :style="{color:listTextColor(index)}">{{ index + 1}}</span>
+                  <img class="num" :src="require(
-                  <span>{{ item.title }}</span>
+                    `../../../../public/images/${imgNumOrg(index)}.png`
+                  )" alt="">
+                  <span class="text">{{ item.title }}</span>
                 </router-link>
               </li>
             </ul>
           </div>
-          <div class="charts_item_box">
+          <div 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 Positive" :key="index" class="list">
-                <router-link :to="'/case/detail?id=' + item.id">
+                <router-link style="display: flex;align-items: center;" :to="'/case/detail?id=' + item.id">
-                  <span class="num" :style="{color:listTextColor(index)}">{{ index + 1}}</span>
+                  <img class="num" :src="require(
-                  <span>{{ item.title }}</span>
+                    `../../../../public/images/${imgNumPink(index)}.png`
+                  )" alt="">
+                  <span class="text">{{ item.title }}</span>
                 </router-link>
               </li>
             </ul>
@@ -53,14 +78,21 @@
 
 <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
-        colorList: ['#FF0000','#FFA500','#FFFF00']
+        switch: {
+          'total': '总',
+          'quarter': '季度',
+        },
+        favorableName: '季度',
+        popularityName: '季度',
       }
     },
     mounted() {
@@ -71,48 +103,78 @@ import apiCase from "@/api/modules/cases.js";
       getPopularity() {
         apiCase.queryPraises(5).then(res => {
           if (res.status == 200) {
-            this.Popularity = res.result;
+            this.Popularity = [...res.result,...res.result];
-            console.log(this.Popularity,'this.Popularity')
           }
         });
       },
       getPositive() {
         apiCase.queryComments(5).then(res => {
           if (res.status == 200) {
-            this.Positive = res.result;
+            this.Positive = [...res.result,...res.result];
-            console.log(this.Positive,'this.Positive');
           }
         });
       },
-      listTextColor(index){
+      imgNumBlue(index){
-        return this.colorList[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]
+      },
+      popularityReview(e){
+        this.popularityName = this.switch[e]
       },
     },
   }
 </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: #999;
+  background-color: #F2F5F7;
   .charts_header{
-    font-size: 18px;
+    width: 100%;
-    background-color: #387DF7;
+    // height: 240px;
-    color: #fff;
+    background: url('../../../../public/images/headerBack.png') no-repeat;
-    height: 72px;
+    background-size: 100% 100%;
-    line-height: 72px;
+    padding-bottom: 37px;
-    padding-left: 40px;
+    .text{
-    margin-bottom: 20px;
+      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: center;
+      justify-content: space-between;
       .charts_item_box{
-        padding: 10px 20px;
+        width: 30%;
+        padding: 30px;
         background-color: #fff;
         width: 30%;
+        min-height: 500px;
         margin-right: 30px;
         .charts_text{
           display: flex;
@@ -120,8 +182,8 @@ import apiCase from "@/api/modules/cases.js";
           height: 40px;
           align-items: center;
           .text{
-            font-size: 18px;
+            font-size: 24px;
-            font-weight: 600;
+            color: #000000;
           }
         }
         .charts_list{
@@ -129,15 +191,40 @@ import apiCase from "@/api/modules/cases.js";
             cursor: pointer;
             margin-top:30px;
             line-height: 22px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
             .num{
-              margin-right: 8px;
+              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%;
+      }
     }
   }
 }

src/views/portal/case/Excellent.vue

@@ -1,37 +1,42 @@
 <template>
   <div class="excellent">
-    <div class="ex_top">
+    <div class="charts_header">
-      <div class="ex_text">浏览TOP榜单</div>
+      <portal-header textColor="#fff"></portal-header>
-      <div class="ex_select">
+      <div class="text">
-        <div class="ex_left">
+        浏览TOP榜单
-          <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 class="ex_top">
+        <div class="ex_select">
+          <div class="ex_left">
+            <div style="margin-right: 12px;">
+              <el-select clearable v-model="majorValue" @change="majorChange" 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" @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">
+          <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">
@@ -81,11 +86,11 @@
               <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="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>
@@ -94,8 +99,8 @@
             layout="total, prev, pager, next, jumper" @change-page="currentChange"></pagination>
         </div>
       </div>
-      <div class="pagination-div">
+      <div class="pagination-div" v-if="caseList.list.length == 0">
-        <span class="notcoures" v-if="caseList.list.length == 0">
+        <span class="notcoures">
           <img :src="`${webBaseUrl}/images/nocase.png`" alt="">
           <h5>暂无案例，请优先学习其它案例吧～</h5>
         </span>
@@ -150,6 +155,14 @@ import apiPlace from "@/api/phase2/place.js"
           value: '选项5',
           label: '北京烤鸭'
         }],
+        optionsMonth: 
+          [...Array(12)].map((item,i)=>{
+            return{
+                value: i+1,
+                label: (i+1)+'月'
+              }
+          })
+        ,
         majorValue: '',
         monthValue: '',
         caseList: {
@@ -280,6 +293,12 @@ import apiPlace from "@/api/phase2/place.js"
     },
     },
     methods: {
+      majorChange(e){
+
+      },
+      monthChange(e){
+        // console.log(e,'xixixix')
+      },
       orgDomainTranslate(code) { // 组织领域翻译
         if (code == '') {
           return
@@ -484,38 +503,52 @@ import apiPlace from "@/api/phase2/place.js"
   }
 }
 .excellent{
-  background-color: #999;
+  background-color: #F2F5F7;
   min-height: 100vh;
-  .ex_top{
+  .charts_header{
-    background-color: #387df7;
+    width: 100%;
-    padding: 10px 30px 10px 40px;
+    // height: 240px;
-    margin-bottom: 20px;
+    background: url('../../../../public/images/headerBack.png') no-repeat;
-    .ex_text{
+    background-size: 100% 100%;
-      font-size: 20px;
+    padding-bottom: 37px;
-      color: #fff;
+    .text{
-      margin-bottom: 10px;
+      margin-top: 41px;
-    }
+      font-weight: 400;
-    .ex_select{
+      font-size: 340%;
-      display: flex;
+      color: #FFFFFF;
-      justify-content: space-between;
+      padding-left: 98px;
-      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%;
+    padding: 31px 90px 103px;
-    margin: 0 auto;
+    .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;

src/views/portal/case/Index.vue

@@ -154,21 +154,21 @@
               <!-- <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="text">发布时间</div>
                 <div class="triangle">
-                  <div :style="{borderBottomColor:pubTimeNum===2?'#00f':'#DCDFE6'}" class="up-triangle"></div>
+                  <div :style="{borderBottomColor:pubTimeNum===2?'#387DF7':'#DCDFE6'}" class="up-triangle"></div>
-                  <div :style="{borderTopColor:pubTimeNum===1?'#00f':'#DCDFE6'}" class="down-triangle"></div>
+                  <div :style="{borderTopColor:pubTimeNum===1?'#387DF7':'#DCDFE6'}" class="down-triangle"></div>
                 </div>
               </div>
               <div class="pub_time" @click="searchPageView">
-                <div>浏览量</div>
+                <div class="text">浏览量</div>
                 <div class="triangle">
-                  <div :style="{borderBottomColor:pageViewNum===2?'#00f':'#DCDFE6'}" class="up-triangle"></div>
+                  <div :style="{borderBottomColor:pageViewNum===2?'#387DF7':'#DCDFE6'}" class="up-triangle"></div>
-                  <div :style="{borderTopColor:pageViewNum===1?'#00f':'#DCDFE6'}" class="down-triangle"></div>
+                  <div :style="{borderTopColor:pageViewNum===1?'#387DF7':'#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="全部年份">
+                style=" 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>
@@ -182,9 +182,11 @@
               </div>
             </div>
           </div>
-          <div class="search_div_num">
+          <div class="back_num">
-            当前已检索 <span style="color:#f00;">
+            <div class="search_div_num">
-              {{ caseList.count }}</span> 条数据
+              当前已检索 <span style="color:#FF4040 ;">
+                {{ caseList.count }}</span> 条数据
+            </div>
           </div>
           <div class="data-content">
             <div v-for="item in caseList.list" :key="item.id" class="case-list">
@@ -201,7 +203,9 @@
                           <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>
+                          <span class="comWords" style="width: 98px;height: 24px;background: #F99000;border-radius: 2px;font-weight: 400;font-size: 12px;color: #FFFFFF;padding: 3px 12px 4px 9px;">
+                            2024年度最佳
+                          </span>
                         </div>
                         <div class="case-info-date portal-time">
                           <i class="el-icon-time"></i>
@@ -285,7 +289,18 @@
         </router-link>
         <div id="fixd-box">
           <div class="portal-ranking ranking-bg">
-            <p class="ranking-title">好评榜</p>
+            <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;">
@@ -299,19 +314,30 @@
                   <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">
+                  <!-- <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> -->
                   <span class="portal-title-desc" style="font-size: 14px;">{{ item.title }}</span>
                 </router-link>
               </li>
             </ul>
           </div>
           <div class="portal-ranking ranking-bg1" style="margin-top:26px">
-            <p class="ranking-title">人气榜</p>
+            <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;">
@@ -336,26 +362,20 @@
               </li>
             </ul>
           </div>
-          <div class="portal-ranking ranking-bg" style="margin-top:26px">
+          <div class="portal-ranking ranking-bg2" 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="">
+                    <img :src="`${webBaseUrl}/images/listred01 .png`" alt="">
                   </span>
                   <span class="portal-right-text blue-tow" v-if="index == 1">
-                    <img :src="`${webBaseUrl}/images/listblue02.png`" alt="">
+                    <img :src="`${webBaseUrl}/images/listred02.png`" alt="">
                   </span>
                   <span class="portal-right-text blue-three" v-if="index == 2">
-                    <img :src="`${webBaseUrl}/images/listblue03.png`" alt="">
+                    <img :src="`${webBaseUrl}/images/listred03.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>
@@ -458,6 +478,12 @@ export default {
   },
   data() {
     return {
+      switch: {
+        'total': '总',
+        'quarter': '季度',
+      },
+      favorableName: '季度',
+      popularityName: '季度',
       pubTimeNum: 0,
       pageViewNum: 0,
       twoId:'',
@@ -796,6 +822,12 @@ export default {
 
   },
   methods: {
+    positiveReview(e){
+      this.favorableName = this.switch[e]
+    },
+    popularityReview(e){
+      this.popularityName = this.switch[e]
+    },
     handleType(msg){
       this.queryCondition.type = msg
     },
@@ -1111,14 +1143,14 @@ export default {
     //     }
     //   });
     // },
-    getPositive() {
+    // getPositive() {
-      apiCase.queryComments(5).then(res => {
+    //   apiCase.queryComments(5).then(res => {
-        if (res.status == 200) {
+    //     if (res.status == 200) {
-          this.Positive = res.result;
+    //       this.Positive = res.result;
-          console.log(res);
+    //       console.log(res);
-        }
+    //     }
-      });
+    //   });
-    },
+    // },
     // 无用
     async getdomain() {
       let key = "org_domain";
@@ -1554,17 +1586,17 @@ export default {
     getPopularity() {
       apiCase.queryPraises(5).then(res => {
         if (res.status == 200) {
-          this.Popularity = res.result;
+          this.Popularity = res.result.slice(0,3);
-          if (res.result.length < 5) {
+          // if (res.result.length < 5) {
-            for (let i = 0; i = (5 - res.result.length); i++) {
+          //   for (let i = 0; i = (5 - res.result.length); i++) {
-              this.Popularity.push({
+          //     this.Popularity.push({
-                authorName: '',
+          //       authorName: '',
-                count: 1,
+          //       count: 1,
-                id: '',
+          //       id: '',
-                title: '',
+          //       title: '',
-              })
+          //     })
-            }
+          //   }
-          }
+          // }
 
         }
       });
@@ -1572,18 +1604,18 @@ export default {
     getPositive() {
       apiCase.queryComments(5).then(res => {
         if (res.status == 200) {
-          this.Positive = res.result;
+          this.Positive = res.result.slice(0,3);
-          if (res.result.length < 5) {
+          // if (res.result.length < 5) {
-            for (let i = 0; i = (5 - res.result.length); i++) {
+          //   for (let i = 0; i = (5 - res.result.length); i++) {
-              this.Positive.push({
+          //     this.Positive.push({
-                authorName: '',
+          //       authorName: '',
-                count: 1,
+          //       count: 1,
-                id: '',
+          //       id: '',
-                title: '',
+          //       title: '',
-              })
+          //     })
-            }
+          //   }
 
-          }
+          // }
         }
       });
     },
@@ -1597,17 +1629,38 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.el-dropdown-link {
+  cursor: pointer;
+  font-weight: 400;
+  font-size: 14px;
+  color: rgba(51,51,51,0.9);
+}
+.el-icon--right{
+  margin-left: 14px !important;
+}
 .the_charts{
+    position: relative;
     display: flex;
+    justify-content: center;
+    align-items: center;
     margin-bottom: 10px;
-    color: #000;
-    font-weight: 600;
     font-size: 18px;
+    max-width: 400px;
+    min-width: 300px;
+    height: 67px;
+    background: #DDEDFF;
+    border-radius: 8px;
     .text{
-      margin-right: 20px;
+      font-size: 18px;
+      color: #387DF7;
     }
     .icon{
-
+      position: absolute;
+      font-size: 18px;
+      color: #387DF7;
+      right: 25px;
+      top: 50%;
+      transform: translateY(-50%);
     }
 
   }
@@ -2198,96 +2251,172 @@ export default {
     // margin-bottom: ;
     .pub_time{
       display: flex;
-      margin-right: 15px;
+      margin-right: 25px;
+      align-items: center;
       cursor: pointer;
+      .text{
+        font-size: 14px;
+        color: #333333;
+      }
       .triangle{
         margin-left: 5px;
         .up-triangle{
           width: 0;
           height: 0;
-          border-left: 5px solid transparent;
+          border-left: 4px solid transparent;
-          border-right: 5px solid transparent;
+          border-right: 4px solid transparent;
-          border-bottom: 10px solid #DCDFE6;
+          border-bottom: 6px solid #DCDFE6;
           margin-bottom: 2px;
         }
         .down-triangle{
           width: 0;
           height: 0;
-          border-left: 5px solid transparent;
+          border-left: 4px solid transparent;
-          border-right: 5px solid transparent;
+          border-right: 4px solid transparent;
-          border-top: 10px solid #DCDFE6;
+          border-top: 6px solid #DCDFE6;
         }
       }
     }
     .time{
+      position: relative;
       display: flex;
-      flex-direction: column;
+      justify-content: center;
       align-items: center;
       margin-left: 15px;
+      width: 116px;
+      height: 38px;
+      border-radius: 4px;
+      // background: #04243C;
+      &:hover{
+        background: #387DF7;
+        .text{
+          color: #fff;
+        }
+      }
       .png{
-        width: 20px;
+        width: 18px;
-        height: 20px;
+        height: 18px;
-        background: url('../../../assets/images/time.png') no-repeat;
+        background: url('../../../../public/images/browse.png') no-repeat;
         background-size: 100%;
+        margin-right: 9px;
       }
       .text{
-        color: #6E7B84;
+        font-size: 14px;
+        color: #333333;
       }
     }
+    .time::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: #04243C;
+      opacity: 0.05;
+      z-index: 1;
+      border-radius: 4px;
+    }
     .time_active{
       display: flex;
-      flex-direction: column;
+      justify-content: center;
       align-items: center;
       margin-left: 15px;
+      width: 116px;
+      height: 38px;
+      background: #387DF7;
+      border-radius: 4px;
       .png{
         width: 20px;
         height: 20px;
-        background: url('../../../assets/images/time_active.png') no-repeat;
+        background: url('../../../../public/images/browse.png') no-repeat;
         background-size: 100%;
+        margin-right: 9px;
       }
       .text{
-        color: #387DF7;
+        font-size: 14px;
+        color: #fff;
       }
     }
     .collect{
+      position: relative;
       display: flex;
-      flex-direction: column;
+      justify-content: center;
       align-items: center;
       margin-left: 15px;
+      width: 116px;
+      height: 38px;
+      border-radius: 4px;
+      // background: #04243C;
+      &:hover{
+        background: #387DF7;
+        .text{
+          color: #fff;
+        }
+      }
       .png{
-        width: 22px;
+        width: 18px;
-        height: 22px;
+        height: 18px;
-        background: url('../../../assets/images/collect.png') no-repeat;
+        background: url('../../../../public/images/collect.png') no-repeat;
         background-size: 100%;
+        margin-right: 9px;
       }
       .text{
-        color: #6E7B84;
+        font-size: 14px;
+        color: #333333;
       }
     }
+    .collect::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: #04243C;
+      opacity: 0.05;
+      z-index: 1;
+      border-radius: 4px;
+    }
     .collect_active{
       display: flex;
-      flex-direction: column;
+      justify-content: center;
       align-items: center;
       margin-left: 15px;
+      width: 116px;
+      height: 38px;
+      background: #387DF7;
+      border-radius: 4px;
       .png{
-        width: 22px;
+        width: 18px;
-        height: 22px;
+        height: 18px;
-        background: url('../../../assets/images/collect_active.png') no-repeat;
+        background: url('../../../../public/images/collect.png') no-repeat;
         background-size: 100%;
+        margin-right: 9px;
       }
       .text{
-        color: #387DF7;
+        font-size: 14px;
+        color: #fff;
       }
     }
   }
 
-  .search_div_num{
+  .back_num{
-    height: 26px;
+    background: #FFFFFF;
     display: flex;
     justify-content: center;
-    align-items: center;
+    padding: 0 40px;
-    background-color: deepskyblue;
+    .search_div_num{
-    color: #387DF7;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 38px;
+      background: #DDEDFF;
+      border-radius: 4px;
+      border: 1px solid #387DF7;
+      color: #387DF7;
+    }
   }
   .data-content {
     background-color: #fff;