no message

src/view/pc/rankList.vue

 <template>
  <div class="rank-list-box">
-  <div class="force-slide"  v-if="userItem || ( title !== '铁粉榜' && city !=='全国')" @click="clear">
-      <img src="" alt="">
-      <div class="force-slide-open">
-        <img src="" alt="">
-        <span></span>
+  <div class="force-slide" :style="!slideopen?'right:-10px':''" >
+  <!-- <div class="force-slide"  v-if="userItem || ( title !== '铁粉榜' && city !=='全国')" @click="clear"> -->
+      <img src="@/assets/img/go-back.png" style="margin-bottom:16px;" v-if="userItem || ( title !== '铁粉榜' && city !=='全国')" @click="clear" alt="">
+      <div class="force-slide-open" @click="slideopen = !slideopen">
+        <img src="@/assets/img/rank-open.png" alt="">
+        <span>{{slideopen?'折叠榜单':'展开榜单'}}</span>
       </div>
   </div>
-   <div class="rank-list" :style="`height:${listHeight}px;`" ref="rank-list">
+   <div class="rank-list" v-if="slideopen" :style="`height:${listHeight}px;`" ref="rank-list">
    
     <div class="title">
       <span>{{ title }}</span>
@@ -52,12 +53,12 @@ export default {
     return {
       userItem:'',
       listHeight:'',
-      cityFlag:false
+      cityFlag:false,
+      slideopen:true
     }
   },
   methods: {
     dropdownFn(val) {
-      // console.log(val)
       this.$emit('dropdownFn',val)
     },
     clear () {
@@ -133,23 +134,28 @@ export default {
   position: relative;
   .force-slide{
     // padding: 10px;
-    width: 64px;
-    height: 40px;
-    background: #364366;
-    color:#78C1FF;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     position: absolute;
     top: 10px;
     right: 410px;
     // left: 20px;
     font-size: 14px;
-    border: 2px solid #5f97d5;
-    cursor: pointer;
+    
     img{
-      width: 12px;
-      height: 16px;
+      width: 28px;
+      height: 28px;
+      cursor: pointer;
+    }
+    .force-slide-open{
+      cursor: pointer;
+      
+      font-size: 14px;
+      font-weight: 500;
+      color: #97ADC6;
+      display: flex;
+      flex-direction: column;
+      span{
+        margin-top: 8px;
+      }
     }
   }
 }