chart

pages/chart/chart.vue

@@ -1,4 +1,5 @@
 <template>
+    <page-meta :page-style="currentAudioMsg.show? 'overflow: hidden;' : ''" />
     <view class="chart-page">
       <van-sticky style="background: #fff">
         <view class="flex search-wrap">
@@ -18,23 +19,46 @@
             />
         </view>
       </van-sticky>
-      <view class="flex chart-list">
-        <view class="chart-item" v-for="item in 6" :key="item">
-          <view class="title">标题</view>
-          <image class="img" src="" mode="aspectFill"/>
+      <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>
+          <image lazy-load class="img" src="" mode="aspectFill"/>
         </view>
       </view>
     </view>
+    <!-- 筛选弹窗 -->
+      <van-popup 
+        :show="showFilter" 
+        @close="showFilter=false"
+        position="bottom"
+        closeable
+        round
+        z-index="99999"
+      >
+        <view class="filter-wrap">
+          <view class="top">
+            <text class="left">展开</text>
+            <text class="center">全部筛选</text>
+          </view>
+          <view class="filter-list"></view>
+        </view>
+      </van-popup>
 </template>
 
 <script>
 export default {
     data() {
         return {
+          showFilter:true,
 
         }
     },
     onLoad() {
+    },
+    methods: {
+      getTitle(e){
+        return e
+      }
     }
 }
 </script>
@@ -62,10 +86,10 @@ export default {
 }
 .chart-list{
   padding: 24rpx 25rpx;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  column-count: 2;
+  width: 100%;
+  column-gap: 20rpx;
   .chart-item{
-    width: 48.5%;
     background: #FFFFFF;
     box-shadow: 0px 0px 12rpx rgba(154, 141, 123, 0.16);
     border-radius: 8rpx;
@@ -75,13 +99,43 @@ export default {
       font-size: 26rpx;
     }
     .img{
+      margin-top: 10rpx;
       width: 100%;
       height: 261rpx;
       display: block;
       margin-left: auto;
       margin-right: auto;
-      background-color: cornsilk;
+      background-color: #f6f6f6;
     }
   }
 }
+
+.filter-wrap{
+  .top{
+    height: 105rpx;
+    background: #FFFFFF;
+    box-shadow: 0px 3rpx 6rpx rgba(206, 206, 206, 0.16);
+    position: relative;
+    .left{
+      position: absolute;
+      left: 34rpx;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 16px;
+      color: #E3B377;
+    }
+    .center{
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%,-50%);
+      font-size: 16px;
+      color: #1F243A;
+    }
+  }
+  .filter-list{
+    height: 60vh;
+    overflow-y: auto;
+  }
+}
 </style>