72 lines
1.6 KiB
Vue
72 lines
1.6 KiB
Vue
|
<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>
|