hongze_yb_xcx/pages-report/reportList.vue

<template>
    <view class="report-list-page">
        <van-sticky style="background: #fff">
            <view class="flex search-wrap">
                <van-search
                    shape="round"
                    :value="searchVal"
                    placeholder="图表名称搜索"
                    @change="searchValChange"
                    @search="onSearch"
                    @clear="onClearSearch"
                    clear-trigger="always"
                    style="flex:1"
                />
                <view class="filter-box">
                    <image src="./static/filter-icon.png" mode="aspectFill"></image>
                    <text>筛选</text>
                </view>
            </view>
        </van-sticky>
        <view class="list-wrap">
            <view class="global-list-card flex list-item" v-for="item in 10" :key="item">
                <image class="img" src="" mode="aspectFill"/>
                <view class="content">
                    <view class="title">【第1期|FICC|橡胶双周报】人民币在博弈的逻辑</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {

}
</script>
<style>
.van-search{
    padding: 0 !important;
}
</style>
<style lang="scss" scoped>
.search-wrap {
    background-color: #fff;
    padding: 30rpx 34rpx;
    align-items: center;
    .filter-box{
        image{
            width: 48rpx;
            height: 48rpx;
            vertical-align: middle;
        }
        text{
            vertical-align: middle;
        }
    }
}
.list-wrap{
    padding: 34rpx;
    .list-item{
        padding: 20rpx;
        margin-bottom: 40rpx;
        .img{
            width: 200rpx;
            height: 260rpx;
            display: block;
            flex-shrink: 0;
            margin-right: 30rpx;
            background-color: #f5f5f5;
        }
    }
}

</style>