hongze_yb_xcx/pages-report/reportList.vue

<template>
  <view class="report-list-page">
    <van-sticky style="background: #fff">
      <view class="flex search-wrap">
        <searchBox style="flex: 1" :focus="focus" placeholder="请输入报告标题或关键字" :hasRightBtn="false" @change="onChange" @search="onSearch"></searchBox>
        <view class="filter-box" @click="showFilter=true">
          <image src="./static/filter-icon.png" mode="aspectFill"></image>
          <text>筛选</text>
        </view>
      </view>
    </van-sticky>
    <view class="report-list-wrap">
      <view class="flex item" v-for="item in 10" :key="item">
        <image class="img" src="" mode="aspectFill" />
        <view class="con">
          <view class="title">【第16期|FICC】宏观商品复盘</view>
          <view class="tips">摘要：市场风险偏好正面</view>
          <view class="time">2021.11.22 18:00</view>
          <view class="audio-box grey-audio-box">
            <text>播放</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 筛选 -->
    <van-popup :show="showFilter" position="bottom" round>
        <view class="filter-wrap">
            <view class="flex top">
                <text style="color:#000">筛选</text>
                <text style="color:#E3B377" @click="showFilter=false">取消</text>
            </view>
            <view class="list-box">
                <van-row gutter="10">
                    <van-col span="8" v-for="item in 17" :key="item">
                        <view class="item active">item</view>
                    </van-col>
                </van-row>
            </view>
            <view class="btn">完成</view>
        </view>
    </van-popup>
  </view>
</template>

<script>
import searchBox from "./components/searchBox.vue";
export default {
  components: {
    searchBox,
  },
  data() {
    return {
      searchVal: "",
      showFilter:true
    };
  },
  methods: {
    onChange(e) {
      this.searchVal = e;
    },
    onSearch() {
      console.log("搜索", this.searchVal);
    },
  },
};
</script>

<style lang="scss" scoped>
.search-wrap {
  background-color: #fff;
  padding: 30rpx 34rpx;
  align-items: center;
  .filter-box {
    image {
      width: 52rpx;
      height: 52rpx;
      vertical-align: middle;
    }
    text {
      vertical-align: middle;
      color: #e3b377;
      font-size: 32rpx;
    }
  }
}
.report-list-wrap {
    padding: 0 34rpx;
  .item {
    margin-bottom: 30rpx;
    .img {
      width: 120rpx;
      height: 160rpx;
      border-radius: 16rpx;
      background-color: #f5f5f5;
      flex-shrink: 0;
      margin-right: 20rpx;
    }
    .con {
      flex: 1;
      position: relative;
      .title {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 8rpx;
      }
      .tips {
        color: #666666;
        margin-bottom: 10rpx;
      }
      .time {
        color: #666666;
      }
      .audio-box {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 99rpx;
        height: 39rpx;
        background: linear-gradient(100deg, #e3b377 0%, #ffddb1 100%);
        border-radius: 20rpx;
        color: #fff;
        font-size: 24rpx;
      }
      .grey-audio-box {
        background: linear-gradient(114deg, #b0b0b0 0%, #e5e2e2 100%);
      }
    }
  }
}
.filter-wrap{
    min-height: 30vh;
    background-color: #fff;
    padding-top: 53rpx;
    .top{
        font-size: 32rpx;
        justify-content: space-between;
        margin-bottom: 40rpx;
        padding: 0 34rpx;
    }
    .list-box{
        padding: 0 34rpx;
        .item{
            background-color: #F6F6F6;
            color: #000000;
            text-align: center;
            line-height: 76rpx;
            margin-bottom: 20rpx;
        }
        .active{
            background-color: #FAEEDE;
        }
    }
    .btn{
        text-align: center;
        color: #fff;
        font-size: 32rpx;
        background-color: #E6B77D;
        line-height: 80rpx;
        margin-top: 50rpx;
    }
}
</style>