<!--
 * @Author: PoJun
 * @Date: 2023-09-15 15:30:09
 * @LastEditors: PoJun
 * @LastEditTime: 2024-01-04 15:33:42
 * @Message: Nothing
-->
<template>
    <view class="boxContent">
        <uv-grid :col="col">
            <uv-grid-item
                @click="click(item)"
                v-for="(item, index) in list"
                :key="index"
                :customStyle="{ height: 140 + 'rpx' }"
            >
                <uv-icon :name="item.icon" custom-prefix="custom-icon" size="30" :color="item.color"></uv-icon>
                <view class="boxContent-text">
                    <text class="uv-m-r-10">{{ item.title }}</text>
                    <uv-badge v-if="item.mark" type="error" max="99" :value="item.mark"></uv-badge>
                </view>
            </uv-grid-item>
        </uv-grid>
    </view>
</template>

<script>
export default {
    name: "BoxWithTitle",
    props: {
        title: {
            type: String,
            default: "", //给个空格占位
        },
        list: {
            type: Array,
            default: function () {
                return [];
            },
        },
        col: {
            type: [String, Number],
            default: "4", //给个空格占位
        },
    },
    data() {
        return {};
    },
    methods: {
        click(item) {
            this.$emit("click", item);
        },
    },
};
</script>

<style lang="scss" scoped>
.boxContent {
    padding: 36rpx 0;
    border-radius: 14rpx;
    background: #fff;
    overflow: hidden;
    &-text {
        font-size: 26rpx;
        margin-top: 14rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
}
</style>
