uni-app 4.8badge组件开发

<template>
  <view class="">
    <free-nav-bar :title="'微信（100）'" :fixed='true'>
      <template v-slot="title"></template>
    </free-nav-bar>
    
    <!-- 列表 -->
    <block v-for="(item,index) in list" :key="index">
      <view class="flex align-stretch">
        <view class="flex align-center justify-center position-relative" style="width: 145rpx;">
          <free-avatar :src="item.avatar" size="92"></free-avatar>
          <!-- 角标 -->
          <text class="bg-danger text-white rounded-circle font-sm position-absolute" 
          style="padding-left: 14rpx;padding-right: 14rpx;padding-bottom: 6rpx;padding-top: 6rpx;right: 15rpx;top: 15rpx;">1</text>
        </view>
        <view class="flex flex-column border-bottom flex-1 py-3 pr-3 border-light-secondary">
          <view class="flex align-center justify-between mb-1">
            <text class="font-md">{{item.nickname}}</text>
            <text class="font-sm text-light-muted">{{item.update_time|formateTime}}</text>
          </view>
          <text class="font text-ellipsis text-light-muted">{{item.data}}</text>
        </view>
      </view>
    </block>
  </view>
</template>
<script>
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeAvatar from '@/components/free-ui/free-avatar.vue';
  import $Time from "@/common/free-lib/time.js";
  export default {
    components: {
      freeNavBar,
      freeAvatar
    },
    data() {
      return {
        list:[
          {
            avatar:"/static/images/demo/demo6.jpg",
            nickname:"昵称",
            update_time:1628069958,
            data:"你好啊，哈哈哈"
          },
          {
            avatar:"/static/images/demo/demo6.jpg",
            nickname:"昵称",
            update_time:1628069958,
            data:"你好啊，哈哈哈"
          },
          {
            avatar:"/static/images/demo/demo6.jpg",
            nickname:"昵称",
            update_time:1628069958,
            data:"你好啊，哈哈哈"
          },
          {
            avatar:"/static/images/demo/demo6.jpg",
            nickname:"昵称",
            update_time:1628069958,
            data:"你好啊，哈哈哈"
          }
        ]
      }
    },
    filters:{
      formateTime(value){
        return $Time.gettime(value);
      }
    },
    onLoad() {
      
    },
    methods: {
    }
  }
</script>
<style>
</style>