xinfeiyue-wx/pages/list/list.vue

<template>
  <view class="container">
    <view class="wrap">
      <view class="list">
        <view class="list-item">
          <view class="list-item__title">
            <view class="list-item__title--time">
              填报时间：2025-02-06 18:00
            </view>
            <view class="list-item__title--tag">
              规划师已查看
            </view>
          </view>

          <view class="list-item__body">
            <view  class="list-item__body--row">
              所属区域：吴中区
            </view>
            <view  class="list-item__body--row">
              填报年份：2025年
            </view>
          </view>

          <view class="list-item__footer">
            <u-button
                shape="circle"
                ripple
                :hair-line="false"
                :custom-style="{
                  'background': '#1989f9',
                  'color': '#f6f8f7',
                  'width': '120rpx',
                  'height': '44rpx',
                  'line-height': '44rpx',
                  'font-size': '24rpx'
                }"
                @click="$u.route({
                  url: '/package_sub/pages/ReportDetail/ReportDetail',
                  params: {
                    id: ''
                  }
                })">查看</u-button>
          </view>
        </view>
      </view>

      <u-loadmore :status="status" :margin-top="40" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      select: {
        page: 1,
        page_size: 10
      },
      total: 0,
      list: [],
      status: 'loadmore',
    };
  },
  methods: {
    async getList(refresh=false) {
      try {
        if (refresh) {
          this.select.page = 1
          this.list.length = 0
        }
      } catch (err) {
        console.error(err)
      }
    }
  },
  onPullDownRefresh() {
    this.getList(true)
  },
}
</script>

<style lang="scss" scoped>
  .container {
    background: #eaf8fe;
    min-height: 100vh;
  }
  .wrap {
    padding: 24rpx 24rpx;

    .list {
      &-item {
        overflow: hidden;
        filter: drop-shadow(-2.179px 3.355px 2.5px rgba(208,209,209,0.3));
        border-radius: 20rpx;

        &__title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 22rpx 28rpx;
          background-color: #f6f8f7;

          &--time {
            font-size: 28rpx;
            color: #333333;
          }
          &--tag {
            font-size: 24rpx;
            color: #e77817;
            border-radius: 40rpx;
            background-color: rgba(236, 138, 51, 0.2);
            padding: 10rpx 30rpx;
          }
        }
        &__body {
          background: #fff;
          padding: 0 28rpx;

          &--row {
            font-size: 24rpx;
            color: #333333;
            padding: 20rpx 22rpx;
            border-bottom: 1rpx solid rgba(152, 152, 152, 0.3);
          }
        }
        &__footer {
          background: #fff;
          display: flex;
          justify-content: flex-end;
          padding: 26rpx 28rpx;
        }
      }
      &-item + &-item {
        margin-top: 24rpx;
      }
    }
  }
</style>