for_client/src/layout/modules/MenuTask.vue

<template>
    <div class="quality-content-box task">
        <n-grid x-gap="20" :y-gap="20" :cols="2">
            <n-gi v-for='item in datas'>
                <div class="quality-content-item" @click="MenuClick(item)">
                    <n-badge :value="20" processing v-if="item.key==='tasks-data'">
                        <div class="quality-content">
                            <div class="quality-icon">
                                <i :class="item.icon"/>
                            </div>
                            <div class="quality-text">{{item.name}}</div>
                        </div>
                    </n-badge>
                    <n-badge :value="23" processing v-else-if="item.key==='message-data'">
                        <div class="quality-content">
                            <div class="quality-icon">
                                <i :class="item.icon"/>
                            </div>
                            <div class="quality-text">{{item.name}}</div>
                        </div>
                    </n-badge>
                    <template v-else>
                        <div class="quality-content">
                            <div class="quality-icon">
                                <i :class="item.icon"/>
                            </div>
                            <div class="quality-text">{{item.name}}</div>
                        </div>
                    </template>
                </div>
            </n-gi>
        </n-grid>
    </div>
</template>

<script setup>
defineProps({
    datas: {
        type: Array,
        default: () => ([])
    }
})

const emit = defineEmits(['change'])
const MenuClick = (item) => {
    emit('change', {key: 'tasks', item})
}
</script>

<style lang="scss" scoped>
.quality-content-box.task {
    position: relative;
    padding: 12px 5px;
    .quality-content-item {
        background-color: #F9F9F9;
        border-radius: 10px;
        padding: 15px;
        cursor: pointer;
        width: 115px;
        height: 115px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        transition: background-color 0.3s;
        .quality-content {
            position: relative;
            .quality-icon {
                position: relative;
                font-size: 32px;
            }
            .quality-text {
                font-size: 12px;
                line-height: 1.6;
                color: #707070;
            }
        }
        &:hover {
            background-color: var(--hc-primary-light-7);
        }
    }
}

html.theme-dark {
    .quality-content-box.task .quality-content-item {
        background-color: #2e2e2e;
        &:hover {
            background-color: #404041;
        }
    }
}
</style>