yn_img_tools_app/src/pages/workbenches/components/icon-card.vue

<template>
    <!-- 卡片 -->
    <view class="icon-card">
        <view class="title">{{ cardTitle }}</view>
        <up-grid :border="false" col="4">
            <up-grid-item
                v-for="(icon, index) in props.iconList"
                :key="index"
                @tap="onHandleJumpPage(icon.jumpPath)"
            >
                <up-image width="56" height="56" shape="circle" :src="icon.iconUrl" />
                <text class="grid-text">{{ icon.title }}</text>
            </up-grid-item>
        </up-grid>
    </view>
</template>

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

const props = defineProps({
    iconList: {
        type: Array,
        default: () => [],
    },
    cardTitle: {
        type: String,
        default: () => '',
    },
})

// 创建对子组件的引用
const uToastRef = ref(null)

// 定义方法
const onHandleJumpPage = (path) => {
    //  跳转对应的页面
    uni.navigateTo({
        url: path,
    })
}
</script>

<style lang="scss" scoped>
.icon-card {
    width: 90%;
    background-color: #fff;
    margin: 0 auto 30rpx;
    border-radius: 6rpx;

    .title {
        padding: 24rpx 32rpx;
        color: #353232;
    }

    .grid-text {
        font-size: 13px;
        padding: 12rpx 0;
        color: #575353;
    }
}
</style>