<template>
    <view class="box">
        <navigator class="nav-box" v-for="item in appList" :key="item.name" :url="item.path" hover-class="navigator-hover">
            <image v-if="item.cover" class="image" :src="item.cover" mode="aspectFill" lazy-load="false" />
            <text v-else>{{ item.remark }}</text>
        </navigator>
    </view>
</template>

<script>
export default {
    props: {
        model: {
            type: String
        }
    }, data() {
        return {
            appList: []
        }
    }, mounted() {
        try {
            this.appList = this.getApps(this.model)
            console.log(this.model, this.appList)
        } catch (error) {
            console.log("未获取到授权信息")
        }

    }
}
</script>

<style lang="scss">
.box {
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .nav-box {
        width: 172.5px;
        height: 104px;
        flex-shrink: 0;
        margin-top: 10px;

        .image {
            width: 100%;
            height: 100%;
        }
    }
}
</style>