<template>
  <view class="msg-box">
    <view class="u-page">
      <u-list @scrolltolower="scrolltolower">
        <u-list-item v-for="(item, index) in 20" :key="index">
          <u-cell>
            <view slot="title" class="u-slot-title">
              <view>
                <view class="u-cell-text title"
                  >系统通知
                  <text class="title-badge">
                  </text>
                </view>
                <view class="u-cell-text desc">你有一笔收货单待定价！</view>
              </view>
            </view>
            <template #value>
              <text class="u-slot-value time">2024-2-21 13:15</text>
            </template>
          </u-cell>
        </u-list-item>
      </u-list>
    </view>
  </view>
</template>
<script setup lang="ts">
const scrolltolower = () => {
  loadmore();
};
const loadmore = () => {
  console.log("****** 加载更多");
};
</script>
<style lang="scss">
.msg-box {
  background: #f8f8f8;
  width: 100%;
  height: 100%;
  .title {
    font-size: 27rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #000000;
    position: relative;
    width: fit-content;
    .title-badge {
      position: absolute;
      right: -6px;
      top: 0px;
      width: 17rpx;
      height: 17rpx;
      background: #ec0f3e;
      border-radius: 50%;
      display: inline-block;
    }
  }
  .desc {
    font-size: 21rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #999999;
    margin-top: 12.18rpx;
  }
  .time {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #999999;
  }
}
</style>
