chart

pages/chart/chart.vue

@@ -1,5 +1,5 @@
 <template>
-    <page-meta :page-style="currentAudioMsg.show? 'overflow: hidden;' : ''" />
+    <page-meta :page-style="showFilter? 'overflow: hidden;' : ''" />
     <view class="chart-page">
       <van-sticky style="background: #fff">
         <view class="flex search-wrap">
@@ -16,12 +16,17 @@
               src="../../static/chart/menu.png"
               mode="widthFix"
               class="menu-icon"
+              @click="showFilter=true"
             />
         </view>
       </van-sticky>
       <view class="chart-list">
         <view class="chart-item" v-for="item in 20" :key="item">
-          <rich-text class="van-multi-ellipsis--l2 title" :nodes="getTitle('标题'+item)"></rich-text>
+          <rich-text 
+            class="van-multi-ellipsis--l2 title" 
+            :nodes="getTitle('标题'+item)" 
+            @longpress="chariItemLongPress(item,$event)"
+          ></rich-text>
           <image lazy-load class="img" src="" mode="aspectFill"/>
         </view>
       </view>
@@ -40,7 +45,13 @@
             <text class="left">展开</text>
             <text class="center">全部筛选</text>
           </view>
-          <view class="filter-list"></view>
+          <view class="filter-list">
+            <view class="title">公共图库</view>
+            <view class="filter-item" v-for="item in 4" :key="item">分类以</view>
+
+            <view class="title">我的图库</view>
+            <view class="filter-item" v-for="item in 5" :key="item">分类以</view>
+          </view>
         </view>
       </van-popup>
 </template>
@@ -49,15 +60,19 @@
 export default {
     data() {
         return {
-          showFilter:true,
+          showFilter:false,
 
         }
     },
-    onLoad() {
-    },
+    onLoad() {},
     methods: {
       getTitle(e){
         return e
+      },
+
+      chariItemLongPress(item,e){
+        console.log(item);
+        console.log(e);
       }
     }
 }
@@ -136,6 +151,19 @@ export default {
   .filter-list{
     height: 60vh;
     overflow-y: auto;
+    .title{
+      font-size: 16px;
+      font-weight: bold;
+      color: #1F243A;
+      padding: 60rpx 0 30rpx 34rpx;
+      border-bottom: 1px solid #E5E5E5;
+    }
+    .filter-item{
+      padding: 20rpx 34rpx;
+      border-bottom: 1px solid #E5E5E5;
+      font-size: 14px;
+      color: #1F243A;
+    }
   }
 }
 </style>