tqApp-webView/components/sidebardyn/module/sidebarItem.vue

<template>
	<view class="sidebar-item-container">
		<view class="container">
			<u-badge 
				numberType="overflow" max="99" 
				:value="hint" shape="circle" 
				:absolute="true" :offset="(!hasPlat(['sanitation']) && !hasPlat(['enterprises']))?[-5,10]:[-24,-7]"
				style="z-index: 1000;justify-content: center;overflow: hidden;"
			>
			</u-badge>
			<view class="item-icon">
				<image :src="$getImages(`${info.mobileIcon}`)" class="icon-img" />
			</view>
			<view class="item-label">{{ info.meta.title }}</view>
        </view>
	</view>
</template>

<script>
export default {
    props: {
        info: {
            type: Object,
            default: () => {
                return {}
            }
        },
		hint: {
            type: Number,
            default: 0
        },
    },
	data() {
		return {
			
		}
	},
	onLoad() {
	},
	methods: {
		
	}
}
</script>

<style lang="scss" scoped>
.sidebar-item-container {
    position: relative;
    width: 100%;
    height: auto;
	margin-top: 30rpx;
    .container {
        position: relative;
        width: 144rpx;
        height: auto;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        .item-icon {
            .icon-img {
                width: 48rpx;
                height: 48rpx;
            }
        }
		.item-label {
			color: #888;
			font-size: 22rpx;
			line-height: 32rpx;
		}
    }
}
</style>