YXGJ/pages/index/cloud/school.vue

<template>
    <My_listbox ref="List" @getlist="getList">
        <view class="box">
            <navigator class="nav-box" v-for="item in list" :key="item.sat_courseware_classid"
                :url="'/packageA/course/index?id=' + item.sat_courseware_classid + '&classname=' + item.classname"
                hover-class="navigator-hover">
                <image v-if="item.cover" class="image" :src="item.cover" mode="aspectFill" lazy-load="false" />
                <text v-else>{{ item.classname }}</text>
            </navigator>
        </view>
    </My_listbox>
</template>

<script>
export default {
    data() {
        return {
            list: []
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.$Http.basic({
                "id": "20221102143302",
                "content": {
                    "parentid": 0,
                    pageSize: 9999,
                    "where": {
                        "isenable": 1
                    }
                }
            }).then(res => {
                console.log("课程分类", res)
                this.$refs.List.RefreshToComplete()
                if (this.cutoff(res.msg)) return;
                this.list = res.data.map(v => {
                    v.cover = this.getSpecifiedImage(v.attinfos[0] || {})
                    return v
                });
            })
        }
    },
}
</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: 92px;
        flex-shrink: 0;
        margin-top: 10px;

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