<template>
    <view class="menu-item">
        <uni-badge class="uni-badge-left-margin" :text="data.count" absolute="rightTop" size="small" :offset="[3, 3]">
            <image :src="getUrl" />
        </uni-badge>
        <text>{{ data.name }}</text>
    </view>
</template>

<script setup>
import { computed } from 'vue'

const ps = defineProps({
    data: {
        type: Object,
        default: function () {
            return {}
        }
    }
})
const getUrl = computed(() => {
    return '/static/panel/' + ps.data.icon + '.png'
})
</script>
<style lang="scss" scoped>
.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10rpx;
    image {
        width: 64rpx;
        height: 64rpx;
    }
    text {
        margin-top: 16rpx;
        color: #1d2129;
        font-size: 30rpx;
    }
}
</style>
