dz-app/pages/ie/entry-ai-report/components/hot-profession.vue

<template>
    <view class="px-40 pb-40">
        <view class="bg-title bg-white p-40">
            <image class="" src="/static/ie/entry/bg-ai-tab2.png" mode="heightFix"/>
        </view>
        <view class="fx-col gap-40">
            <view class="rounded-lg p-10 bg-blue-100" v-for="u in professionData" :key="u.universityName">
                <view class="pl-10 pt-10 pb-20 text-primary-deep">{{ u.universityName }}</view>
                <view class="rounded-lg bg-white pt-40 pb-40">
                    <uv-cell-group :border="false">
                        <uv-cell v-for="(p, idx) in u.hotList" :key="idx" :border="false" isLink
                                 :right-icon-style="{color:'var(--primary-color)'}" @click="goMajorDetail(p)">
                            <template #title>
                                <view class="fx-row gap-20">
                                    <text class="mr-20" :class="{ 'is-highlight': idx < 3 }">{{ idx + 1 }}</text>
                                    <view class="flex-1 fx-col">
                                        <text>{{ p.name }}</text>
                                        <text class="text-primary-light text-2xs">{{ p.majorDirection }}</text>
                                    </view>
                                </view>
                            </template>
                            <template #value>
                                <text class="text-primary">详情</text>
                            </template>
                        </uv-cell>
                    </uv-cell-group>
                </view>
            </view>
        </view>
    </view>
</template>
<script>

import {useInjectTransfer} from "@/hooks/useTransfer";

export default {
    name: 'hot-profession',
    setup() {
        const {prevData, transferTo} = useInjectTransfer()

        return {
            prevData,
            transferTo
        }
    },
    computed: {
        professionData() {
            return this.prevData.details?.map(u => ({
                universityName: u.university?.name,
                hotList: u.professions?.filter(p => p.hot).filter((_, i) => i < 5)
            })) || []
        }
    },
    methods: {
        goMajorDetail(major) {
            this.transferTo('/pages/major-library/detail/detail', ['code'], major)
        }
    }
};
</script>
<style lang="scss" scoped>
.bg-title {
    position: sticky;
    top: 44px;
    z-index: 1;
    text-align: center;

    image {
        height: 36rpx;
    }
}

.is-highlight {
    color: #f9422a;
}
</style>