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

<template>
    <view class="px-40 pb-40">
        <view class="bg-title bg-white p-40">
            <image src="/static/ie/entry/bg-ai-tab1.png" mode="heightFix"/>
        </view>
        <view class="fx-col gap-40">
            <view v-for="u in analysisData" :key="u.universityName">
                <view class="text-sm text-main mb-15">{{ u.universityName }}</view>
                <table class="table w-full mx-border text-2xs text-content">
                    <tr>
                        <th>专业名称</th>
                        <th>{{ u.year }}年录取分</th>
                    </tr>
                    <tr v-for="(m,i) in u.majorDetails" :key="i">
                        <td>
                            <view>{{ m.majorName }}</view>
                            <view v-if="m.majorDirection">({{ m.majorDirection }})</view>
                        </td>
                        <td>{{ m.history && m.history.score || '?' }}分</td>
                    </tr>
                </table>
            </view>
        </view>
    </view>
</template>
<script>

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

export default {
    name: 'profession-analysis',
    setup() {
        const {prevData} = useInjectTransfer()
        return {
            prevData
        }
    },
    computed: {
        analysisData() {
            // 院校的专业分差数据
            const {year} = this.prevData
            return this.prevData.details?.map(u => ({
                year,
                universityName: u.university?.name,
                majorDetails: u.majorDetails?.map(m => ({
                    majorName: m.majorName,
                    majorDirection: m.majorDirection,
                    history: m.histories?.find(h => h.year == year)
                })) || []
            }))
        }
    }
};
</script>
<style lang="scss" scoped>
.bg-title {
    position: sticky;
    top: 44px;
    z-index: 1;
    text-align: center;

    image {
        height: 36rpx;
    }
}

.table {
    border-collapse: collapse;

    th {
        background-color: #FEF7DB;
    }

    th,
    td {
        border: 0.5px solid #F3F2F2;
        line-height: 50rpx;
        text-align: center;
        word-wrap: break-word; /* 允许单词被折行 */
        word-break: break-word; /* 如果超出宽度，允许强制断行 */
    }
}
</style>