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

<!--
 * @Author: yangpeiqin
 * @Date: 2023-12-11 10:35:21
 * @LastEditors: zhangmudan
 * @LastEditTime: 2024-07-24 14:40:35
 * @FilePath: \tqApp\components\sidebar\module\sidebarItem.vue
-->

<template>
	<view class="sidebar-item-container">
		<view class="container">
      <u-badge 
				numberType="overflow" max="99" 
				:value="info.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="info.icon" class="icon-img" :class="direction?'img80':''" />
			</view>
			<view class="item-label">{{ info.label }}</view>
        </view>
	</view>
</template>

<script>
export default {
    props: {
        info: {
            type: Object,
            default: () => {
                return {}
            }
        },
        direction:{
          type: String,
          default: ''
        },
    },
	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;
        width: 100%;
        height: auto;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        .item-icon {
            .icon-img {
                width: 48rpx;
                height: 48rpx;
            }
            .img80{
              width: 80rpx;
                height: 80rpx;
            }
        }
		.item-label {
			// margin-top: 5px;
			color: #888;
			font-size: 22rpx;
			line-height: 32rpx;
		}
    }
}
</style>