zhouwentao
/
vitesse-yitisheng-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: zhouwentao:main
Branches Tags
zhouwentao:main
zhouwentao:react-agentation
zhouwentao:vite_vue_ts_old
..
compare: zhouwentao:react-agentation
Branches Tags
zhouwentao:main
zhouwentao:react-agentation
zhouwentao:vite_vue_ts_old

No commits in common. "main" and "react-agentation" have entirely different histories.
main ... react-agen

5 changed files with 515 additions and 705 deletions
Show Stats Expand all files Collapse all files

1
package.json
View File

@ -24,7 +24,6 @@
"agentation": "^2.2.0",
"axios": "^1.13.2",
"crypto-js": "^4.2.0",
"echarts": "^5.5.0",
"nprogress": "catalog:frontend",
"pinia": "catalog:frontend",
"react": "^19.2.4",

732
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

26
src/components/school/SchoolOverview.vue
View File

@ -83,11 +83,6 @@ const locationInfo = computed(() => {
: { address: '山东省东营市...', details: '老校区历史悠久...' }
})
const schoolName = '中国石油大学（华东）'
const mapQuery = computed(() => `${schoolName} ${activeLocationTab.value} ${locationInfo.value.address}`)
const mapEmbedUrl = computed(() => `https://map.baidu.com/?newmap=1&ie=utf-8&wd=${encodeURIComponent(mapQuery.value)}`)
const mapDetailUrl = computed(() => `https://map.baidu.com/?newmap=1&ie=utf-8&wd=${encodeURIComponent(mapQuery.value)}`)
const currentCampusFacilities = computed(() => {
return campusFacilities.value.find(c => c.name === selectedCampus.value)
})
@ -140,24 +135,13 @@ const currentCampusFacilities = computed(() => {
</button>
</div>
<div class="h-64 flex flex-col md:flex-row">
<!-- 地图 -->
<div class="group relative w-full overflow-hidden bg-blue-50 md:w-1/2 dark:bg-slate-900">
<iframe
class="absolute inset-0 h-full w-full"
:src="mapEmbedUrl"
title="Baidu Map"
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>
<!-- 模拟地图 -->
<div class="group relative w-full flex items-center justify-center bg-blue-50 md:w-1/2 dark:bg-slate-900">
<span class="text-4xl text-blue-300">MAP</span>
<div class="absolute inset-0 bg-black/5 transition dark:bg-white/5 group-hover:bg-transparent" />
<a
:href="mapDetailUrl"
target="_blank"
rel="noopener"
class="absolute bottom-2 right-2 rounded bg-white px-2 py-1 text-xs shadow dark:bg-slate-700"
>
<div class="absolute bottom-2 right-2 rounded bg-white px-2 py-1 text-xs shadow dark:bg-slate-700">
地图详情 >
</a>
</div>
</div>
<!-- 地址详情 -->
<div class="w-full flex flex-col justify-center p-4 md:w-1/2">

289
src/pages/major/[majorCode].vue
View File

@ -1,37 +1,38 @@
<template>
<div class="mx-auto max-w-7xl px-4 lg:px-8 sm:px-6">
<div class="space-y-4">
<div class="min-h-screen bg-gray-50 p-4 md:p-8 font-sans text-gray-700">
<div class="max-w-6xl mx-auto space-y-4">
<!-- 头部卡片: 专业标题与关注 -->
<div class="bg-white rounded shadow-sm p-6 mt-8 flex flex-col md:flex-row items-start md:items-center justify-between gap-4 dark:bg-slate-800">
<div class="flex items-center gap-4">
<div class="bg-white rounded shadow-sm p-6 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
<div class="flex items-start gap-4">
<!-- 图标 -->
<div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
<svg class="w-8 h-8 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>
</div>
<div>
<h1 class="text-2xl font-bold text-gray-900 mb-2 dark:text-white">产品设计</h1>
<h1 class="text-2xl font-bold text-gray-900 mb-2">产品设计</h1>
<div class="flex flex-wrap gap-2 text-sm">
<span class="px-2 py-0.5 bg-gray-100 text-gray-600 rounded dark:bg-slate-700 dark:text-slate-200">本科</span>
<span class="px-2 py-0.5 bg-gray-100 text-gray-600 rounded dark:bg-slate-700 dark:text-slate-200">4年</span>
<span class="px-2 py-0.5 bg-gray-100 text-gray-600 rounded dark:bg-slate-700 dark:text-slate-200">艺术学学士</span>
<span class="px-2 py-0.5 bg-gray-100 text-gray-600 rounded">本科</span>
<span class="px-2 py-0.5 bg-gray-100 text-gray-600 rounded">4年</span>
<span class="px-2 py-0.5 bg-gray-100 text-gray-600 rounded">艺术学学士</span>
</div>
<div class="mt-2 text-sm text-gray-500 dark:text-slate-400">设计学类</div>
<div class="mt-2 text-sm text-gray-500">设计学类</div>
</div>
</div>
<button class="px-4 py-1.5 border border-gray-300 rounded text-gray-600 hover:bg-gray-50 transition text-sm dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700">
<button class="px-4 py-1.5 border border-gray-300 rounded text-gray-600 hover:bg-gray-50 transition text-sm">
+ 关注
</button>
</div>
<!-- 导航栏 -->
<div class="bg-white rounded shadow-sm border-b border-gray-100 dark:bg-slate-800 dark:border-slate-700">
<div class="bg-white rounded shadow-sm border-b border-gray-100">
<div class="flex px-6 gap-8">
<button
v-for="tab in tabs"
:key="tab.id"
@click="currentTab = tab.id"
class="py-4 text-sm font-medium border-b-2 transition-colors relative"
:class="currentTab === tab.id ? 'border-orange-500 text-orange-500' : 'border-transparent text-gray-600 hover:text-gray-900 dark:text-slate-300 dark:hover:text-white'"
:class="currentTab === tab.id ? 'border-orange-500 text-orange-500' : 'border-transparent text-gray-600 hover:text-gray-900'"
>
{{ tab.name }}
</button>
@ -39,69 +40,48 @@
</div>
<!-- 内容区域 -->
<div class="bg-white rounded shadow-sm p-6 min-h-[500px] dark:bg-slate-800">
<div class="bg-white rounded shadow-sm p-6 min-h-[500px]">
<!-- Panel 1: 基本介绍 -->
<div v-if="currentTab === 'intro'" class="space-y-6">
<div class="rounded-lg border border-gray-100 bg-gray-50 p-1 dark:border-slate-700 dark:bg-slate-700/40">
<button
class="w-full flex items-center justify-between gap-4 rounded-lg px-4 py-3 text-left text-sm font-semibold text-gray-900 transition hover:bg-white dark:text-white dark:hover:bg-slate-700"
@click="toggleIntroSection('summary')"
>
专业概括
<span class="text-gray-400 transition-transform" :class="openIntroSection === 'summary' ? 'rotate-180' : ''">▾</span>
</button>
<div v-show="openIntroSection === 'summary'" class="space-y-4 px-4 pb-4 pt-4 text-left text-sm text-gray-600 dark:text-slate-300">
<div v-if="currentTab === 'intro'" class="space-y-8">
<ExpandableSection title="专业概括">
<div class="space-y-4">
<div>
<span class="font-bold text-gray-900 dark:text-white">是什么：</span>
<span class="font-bold text-gray-900">是什么：</span>
产品设计主要研究艺术学、设计学、计算机技术等方面的基本知识和技能，进行工业设计、外观设计、结构设计、造型设计以及交互设计等。例如：勺子、杯子的造型设计，衣柜、橱柜的结构设计，软件界面的设计等。关键词：杯子 衣柜 软件界面 计算机
</div>
<div>
<span class="font-bold text-gray-900 dark:text-white">学什么：</span>
<span class="font-bold text-gray-900">学什么：</span>
《工业美术史》、《工业设计史》、《设计手绘》、《色彩传达》、《产品结构设计》、《产品造型设计》、《产品创新设计》、《产品造型材料工艺》、《产品语义设计》、《计算机辅助设计》 部分高校按以下专业方向培养：服装设计、家具设计、数字设计、应用设计、纺织品设计、产品造型设计、珠宝首饰设计、鞋类与工程、鞋类与皮具设计。
</div>
</div>
</div>
</ExpandableSection>
<div class="rounded-lg border border-gray-100 bg-gray-50 p-1 dark:border-slate-700 dark:bg-slate-700/40">
<button
class="w-full flex items-center justify-between gap-4 rounded-lg px-4 py-3 text-left text-sm font-semibold text-gray-900 transition hover:bg-white dark:text-white dark:hover:bg-slate-700"
@click="toggleIntroSection('training')"
>
培养方向
<span class="text-gray-400 transition-transform" :class="openIntroSection === 'training' ? 'rotate-180' : ''">▾</span>
</button>
<div v-show="openIntroSection === 'training'" class="space-y-4 px-4 pb-4 pt-4 text-left text-sm text-gray-600 dark:text-slate-300">
<ExpandableSection title="培养方向">
<div class="space-y-4">
<div>
<span class="font-bold text-gray-900 dark:text-white">培养目标：</span>
<span class="font-bold text-gray-900">培养目标：</span>
本专业培养具有“厚基础、宽口径、重能力”、“知识、能力、素质”协调发展，具有扎实的工业设计基础理论知识及产品造型能力、良好的职业技能和职业素质，能在企事业单位、专业设计部门、教学科研单位从事以产品创新为重点的设计、管理、科研或教学工作，也能从事与产品设计相关的视觉传达设计、信息设计、环境设施设计或展示设计工作的应用型研究型人才。
</div>
<div>
<span class="font-bold text-gray-900 dark:text-white">培养要求：</span>
<span class="font-bold text-gray-900">培养要求：</span>
本专业在能力结构方面要求学生应具有一定的设计创新思维意识，初步具备综合运用所学知识，分析和解决工业产品造型设计过程中遇到的研究、开发、设计等方面问题的能力；能清晰地表达设计思想，熟悉产品设计的程序与方法。
</div>
</div>
</div>
</ExpandableSection>
<div class="rounded-lg border border-gray-100 bg-gray-50 p-1 dark:border-slate-700 dark:bg-slate-700/40">
<button
class="w-full flex items-center justify-between gap-4 rounded-lg px-4 py-3 text-left text-sm font-semibold text-gray-900 transition hover:bg-white dark:text-white dark:hover:bg-slate-700"
@click="toggleIntroSection('courses')"
>
主要课程
<span class="text-gray-400 transition-transform" :class="openIntroSection === 'courses' ? 'rotate-180' : ''">▾</span>
</button>
<div v-show="openIntroSection === 'courses'" class="space-y-4 px-4 pb-4 pt-4 text-left text-sm text-gray-600 dark:text-slate-300">
<ExpandableSection title="主要课程">
<div class="space-y-4">
<div>
<span class="font-bold text-gray-900 dark:text-white">主干学科：</span>
<span class="font-bold text-gray-900">主干学科：</span>
产品设计方法学、人机工程学、材料与工艺学。
</div>
<div>
<span class="font-bold text-gray-900 dark:text-white">核心课程：</span>
<span class="font-bold text-gray-900">核心课程：</span>
工业设计史、产品设计方法学、产品设计效果图表现技法、人机工程学、制图、模型制作与工艺、产品调研方法、产品设计报告书制作、数字化产品设计及产品设计相关软件等基础理论知识以及基本方法、中外工艺美术史、设计学（美学、心理学、公关关系学）、造型基础、构成（平面、色彩、立体构成）、世界工业设计发展史等相关课程等。
</div>
</div>
</div>
</ExpandableSection>
</div>
<!-- Panel 2: 就业分析 -->
@ -109,19 +89,23 @@
<!-- 职业分布 -->
<div>
<h3 class="font-bold text-gray-900 mb-6 dark:text-white">职业分布</h3>
<div class="flex flex-col md:flex-row gap-8 items-center bg-gray-50 p-6 rounded-lg dark:bg-slate-700/40">
<div ref="jobPieRef" class="w-48 h-48 flex-shrink-0"></div>
<h3 class="font-bold text-gray-900 mb-6">职业分布</h3>
<div class="flex flex-col md:flex-row gap-8 items-center bg-gray-50 p-6 rounded-lg">
<!-- CSS 模拟饼图 -->
<div class="w-48 h-48 rounded-full relative flex-shrink-0"
style="background: conic-gradient(#f97316 0% 35%, #84cc16 35% 75%, #06b6d4 75% 85%, #ef4444 85% 100%);">
<div class="absolute inset-8 bg-gray-50 rounded-full"></div>
</div>
<div class="flex-1">
<h4 class="font-bold mb-2 dark:text-white">{{ selectedJob.name }}</h4>
<p class="text-sm text-gray-600 leading-relaxed dark:text-slate-300">
{{ selectedJob.description }}
<h4 class="font-bold mb-2">其他</h4>
<p class="text-sm text-gray-600 leading-relaxed">
资深产品经理，资深产品设计师、产品创意设计主管，ID工程师，产品专家，UI/UX Designer and Researcher 交互界面/体验设计师及研究员，高级能开发，产品规划经理，市场部，市场技术开发专员。
</p>
<div class="flex flex-wrap gap-4 mt-4 text-xs">
<div v-for="item in jobDistribution" :key="item.name" class="flex items-center gap-1">
<span class="w-3 h-3 rounded-sm" :style="{ backgroundColor: item.color }"></span>
{{ item.name }}
</div>
<div class="flex items-center gap-1"><span class="w-3 h-3 bg-orange-500 rounded-sm"></span>其他</div>
<div class="flex items-center gap-1"><span class="w-3 h-3 bg-lime-500 rounded-sm"></span>艺术设计</div>
<div class="flex items-center gap-1"><span class="w-3 h-3 bg-cyan-500 rounded-sm"></span>装饰装修</div>
<div class="flex items-center gap-1"><span class="w-3 h-3 bg-red-500 rounded-sm"></span>市场</div>
</div>
</div>
</div>
@ -129,10 +113,10 @@
<!-- 薪资分布 -->
<div>
<h3 class="font-bold text-gray-900 mb-6 dark:text-white">薪资分布</h3>
<div class="overflow-x-auto border border-gray-100 rounded-lg dark:border-slate-700">
<h3 class="font-bold text-gray-900 mb-6">薪资分布</h3>
<div class="overflow-x-auto border border-gray-100 rounded-lg">
<table class="w-full text-sm text-left">
<thead class="bg-gray-50 text-gray-900 font-medium dark:bg-slate-700 dark:text-white">
<thead class="bg-gray-50 text-gray-900 font-medium">
<tr>
<th class="px-6 py-4">岗位</th>
<th class="px-6 py-4">应届生月薪</th>
@ -140,7 +124,7 @@
<th class="px-6 py-4">毕业3-5年月薪</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100 dark:divide-slate-700">
<tbody class="divide-y divide-gray-100">
<tr>
<td class="px-6 py-4">家具 (家居用品设计)</td>
<td class="px-6 py-4">6547~10881</td>
@ -160,19 +144,19 @@
<!-- 地区去向 -->
<div>
<h3 class="font-bold text-gray-900 mb-6 dark:text-white">地区去向</h3>
<h3 class="font-bold text-gray-900 mb-6">地区去向</h3>
<div class="flex flex-col md:flex-row gap-12 items-center">
<div class="w-32 h-32 rounded-full border-8 border-orange-400 flex items-center justify-center flex-col text-center">
<span class="text-xs text-gray-500 dark:text-slate-400">去北上广深比例</span>
<span class="text-xl font-bold text-gray-900 dark:text-white">70%</span>
<span class="text-xs text-gray-500">去北上广深比例</span>
<span class="text-xl font-bold text-gray-900">70%</span>
</div>
<div class="flex-1 w-full space-y-3">
<div v-for="city in cities" :key="city.name" class="flex items-center text-sm">
<span class="w-12 text-gray-600 dark:text-slate-300">{{ city.name }}</span>
<div class="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden mx-3 dark:bg-slate-700">
<span class="w-12 text-gray-600">{{ city.name }}</span>
<div class="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden mx-3">
<div class="h-full bg-orange-500 rounded-full" :style="{ width: city.percent + '%' }"></div>
</div>
<span class="w-8 text-right text-gray-900 dark:text-white">{{ city.percent }}%</span>
<span class="w-8 text-right text-gray-900">{{ city.percent }}%</span>
</div>
</div>
</div>
@ -182,32 +166,32 @@
<!-- Panel 3: 开设院校 -->
<div v-if="currentTab === 'school'" class="space-y-6">
<div v-for="school in schools" :key="school.name" class="flex items-center justify-between border-b border-gray-100 pb-6 last:border-0 dark:border-slate-700">
<div v-for="school in schools" :key="school.name" class="flex items-center justify-between border-b border-gray-100 pb-6 last:border-0">
<div class="flex gap-4">
<img :src="school.logo" class="w-14 h-14 rounded-full border border-gray-200 object-cover" alt="logo" />
<div>
<h3 class="font-bold text-lg text-gray-900 mb-1 dark:text-white">{{ school.name }}</h3>
<h3 class="font-bold text-lg text-gray-900 mb-1">{{ school.name }}</h3>
<div class="flex gap-2 mb-2">
<span v-for="tag in school.tags" :key="tag" class="px-1.5 py-0.5 bg-gray-100 text-xs text-gray-500 rounded dark:bg-slate-700 dark:text-slate-200">{{ tag }}</span>
<span v-for="tag in school.tags" :key="tag" class="px-1.5 py-0.5 bg-gray-100 text-xs text-gray-500 rounded">{{ tag }}</span>
</div>
<div class="text-sm text-gray-500 dark:text-slate-400">{{ school.location }}</div>
<div class="text-sm text-gray-500">{{ school.location }}</div>
</div>
</div>
<div class="text-right">
<div class="text-sm text-gray-500 mb-1 dark:text-slate-400">排名: <span class="font-medium text-gray-900 dark:text-white">{{ school.rank }}</span></div>
<div class="text-sm text-gray-500 dark:text-slate-400">专业学科评级 <span class="text-orange-500 font-bold">{{ school.grade }}</span></div>
<div class="text-sm text-gray-500 mb-1">排名: <span class="font-medium text-gray-900">{{ school.rank }}</span></div>
<div class="text-sm text-gray-500">专业学科评级 <span class="text-orange-500 font-bold">{{ school.grade }}</span></div>
</div>
</div>
<!-- 分页 -->
<div class="flex justify-center gap-2 mt-8">
<button class="w-8 h-8 border border-gray-300 rounded hover:border-orange-500 hover:text-orange-500 transition text-sm dark:border-slate-600 dark:text-slate-200 dark:hover:text-orange-400">&lt;</button>
<button class="w-8 h-8 border border-gray-300 rounded hover:border-orange-500 hover:text-orange-500 transition text-sm">&lt;</button>
<button class="w-8 h-8 bg-orange-500 text-white rounded text-sm">1</button>
<button class="w-8 h-8 border border-gray-300 rounded hover:border-orange-500 hover:text-orange-500 transition text-sm dark:border-slate-600 dark:text-slate-200 dark:hover:text-orange-400">2</button>
<button class="w-8 h-8 border border-gray-300 rounded hover:border-orange-500 hover:text-orange-500 transition text-sm dark:border-slate-600 dark:text-slate-200 dark:hover:text-orange-400">3</button>
<span class="leading-8 text-gray-400 dark:text-slate-500">...</span>
<button class="w-8 h-8 border border-gray-300 rounded hover:border-orange-500 hover:text-orange-500 transition text-sm dark:border-slate-600 dark:text-slate-200 dark:hover:text-orange-400">42</button>
<button class="w-8 h-8 border border-gray-300 rounded hover:border-orange-500 hover:text-orange-500 transition text-sm dark:border-slate-600 dark:text-slate-200 dark:hover:text-orange-400">&gt;</button>
<button class="w-8 h-8 border border-gray-300 rounded hover:border-orange-500 hover:text-orange-500 transition text-sm">2</button>
<button class="w-8 h-8 border border-gray-300 rounded hover:border-orange-500 hover:text-orange-500 transition text-sm">3</button>
<span class="leading-8 text-gray-400">...</span>
<button class="w-8 h-8 border border-gray-300 rounded hover:border-orange-500 hover:text-orange-500 transition text-sm">42</button>
<button class="w-8 h-8 border border-gray-300 rounded hover:border-orange-500 hover:text-orange-500 transition text-sm">&gt;</button>
</div>
</div>
@ -217,7 +201,7 @@
</template>
<script setup>
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { ref } from 'vue';
// --- Tab Logic ---
const currentTab = ref('intro');
@ -227,145 +211,6 @@ const tabs = [
{ id: 'school', name: '开设院校' }
];
const openIntroSection = ref('summary');
const toggleIntroSection = (section) => {
openIntroSection.value = openIntroSection.value === section ? '' : section;
};
const jobDistribution = [
{
name: '其他',
value: 35,
color: '#f97316',
description: '资深产品经理、资深产品设计师、产品创意设计主管、ID 工程师、产品专家、UI/UX 设计师及研究员等岗位。',
},
{
name: '艺术设计',
value: 40,
color: '#84cc16',
description: '偏向视觉与品牌方向：视觉设计、平面设计、品牌设计、插画与多媒体设计等岗位。',
},
{
name: '装饰装修',
value: 10,
color: '#06b6d4',
description: '偏向空间与工程方向：室内设计、展示设计、软装设计与施工协调等岗位。',
},
{
name: '市场',
value: 15,
color: '#ef4444',
description: '偏向商业与增长方向：市场策划、产品运营、用户研究、市场拓展等岗位。',
},
];
const jobPieRef = ref(null);
let jobPieChart;
let echartsModule;
const selectedJob = ref(jobDistribution[0]);
const defaultJobName = jobDistribution[0].name;
const pinnedJobName = ref(null);
const loadEcharts = async () => {
if (!echartsModule)
echartsModule = await import('echarts');
return echartsModule;
};
const renderJobPie = async () => {
if (currentTab.value !== 'job')
return;
await nextTick();
if (currentTab.value !== 'job')
return;
if (!jobPieRef.value)
return;
if (jobPieChart)
jobPieChart.dispose();
const echarts = await loadEcharts();
if (currentTab.value !== 'job' || !jobPieRef.value)
return;
jobPieChart = echarts.init(jobPieRef.value);
jobPieChart.setOption({
tooltip: {
trigger: 'item',
formatter: '{b}: {d}%',
},
series: [
{
type: 'pie',
radius: ['55%', '80%'],
center: ['50%', '50%'],
label: { show: false },
labelLine: { show: false },
data: jobDistribution.map(item => ({
name: item.name,
value: item.value,
itemStyle: { color: item.color },
})),
},
],
});
jobPieChart.on('mouseover', (params) => {
if (pinnedJobName.value)
return;
const target = jobDistribution.find(item => item.name === params.name);
if (target)
selectedJob.value = target;
});
jobPieChart.on('mouseout', () => {
const target = jobDistribution.find(item => item.name === (pinnedJobName.value || defaultJobName));
if (target)
selectedJob.value = target;
});
jobPieChart.on('click', (params) => {
const target = jobDistribution.find(item => item.name === params.name);
if (!target)
return;
pinnedJobName.value = pinnedJobName.value === target.name ? null : target.name;
selectedJob.value = target;
});
};
const handleJobPieResize = () => {
if (jobPieChart)
jobPieChart.resize();
};
watch(currentTab, (value) => {
if (value === 'job') {
renderJobPie();
return;
}
if (jobPieChart) {
jobPieChart.dispose();
jobPieChart = null;
}
});
onMounted(() => {
if (currentTab.value === 'job')
renderJobPie();
window.addEventListener('resize', handleJobPieResize);
});
onBeforeUnmount(() => {
window.removeEventListener('resize', handleJobPieResize);
if (jobPieChart) {
jobPieChart.dispose();
jobPieChart = null;
}
});
// --- Data for School List ---
const schools = [
{

168
src/pages/school/[schoolCode].vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, ref, onMounted, onUnmounted, nextTick } from 'vue'
import { computed, ref, onMounted, onUnmounted } from 'vue'
// 导入子组件
import SchoolOverview from '~/components/school/SchoolOverview.vue'
@ -27,15 +27,6 @@ const schoolCode = ref('')
const activeLocationTab = ref('唐岛湾校区')
const activeNavTab = ref('学校概况')
const tabs = [
{ id: '学校概况', name: '学校概况' },
{ id: '历年分数', name: '历年分数' },
{ id: '招生计划', name: '招生计划' },
{ id: '开设专业', name: '开设专业' },
{ id: '录取预测', name: '录取预测' },
];
// 轮播图相关
const currentSlide = ref(0)
const carouselInterval = ref<number | null>(null)
@ -63,14 +54,6 @@ const rankings: Ranking[] = [
{ label: '人气值排名', value: 70 },
]
const quickStats = [
{ label: '建校时间', value: '1953年', icon: '🕒', color: 'text-orange-500' },
{ label: '占地面积', value: '5000亩', icon: '⛳', color: 'text-purple-500' },
{ label: '主管部门', value: '教育部', icon: '🎓', color: 'text-blue-500' },
{ label: '联系电话', value: '0532-86983086', icon: '📞', color: 'text-blue-500' },
{ label: '邮箱', value: 'zhaosheng@upc.edu.cn', icon: '📧', color: 'text-blue-500' },
]
// 院系设置数据 (模拟部分)
const departments: Major[] = [
{ college: '地球科学与技术学院', majors: ['勘查技术与工程', '地质学', '资源勘查工程', '地球物理学'] },
@ -141,34 +124,12 @@ const handleCompare = () => {
// TODO: 实现对比逻辑
}
const navRef = ref<HTMLElement | null>(null)
const navPlaceholderHeight = ref(0)
const isNavSticky = ref(false)
const stickyTrigger = 220
const updateNavHeight = () => {
if (navRef.value)
navPlaceholderHeight.value = navRef.value.getBoundingClientRect().height
}
const updateNavSticky = () => {
isNavSticky.value = window.scrollY >= stickyTrigger
}
onMounted(() => {
startCarousel()
updateNavSticky()
nextTick(() => {
updateNavHeight()
})
window.addEventListener('scroll', updateNavSticky, { passive: true })
window.addEventListener('resize', updateNavHeight)
})
onUnmounted(() => {
stopCarousel()
window.removeEventListener('scroll', updateNavSticky)
window.removeEventListener('resize', updateNavHeight)
})
watchEffect(() => {
@ -180,10 +141,10 @@ useHead({
</script>
<template>
<div class="mx-auto max-w-7xl px-4 lg:px-8 sm:px-6">
<div class="mx-auto max-w-7xl min-h-screen bg-gray-50 px-4 transition-colors duration-300 dark:bg-slate-900 lg:px-8 sm:px-6">
<!-- 顶部导航 & Header sticky -->
<header class="top-0 z-50">
<div class="mb-4 mt-8 rounded-lg bg-white pl-4 pr-4 dark:bg-slate-800">
<header class="top-0 z-50 shadow-sm">
<div class="mb-8 mt-8 rounded-lg bg-white dark:bg-slate-800">
<div class="h-20 flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="h-16 w-16 flex items-center justify-center rounded-full bg-blue-900 text-sm text-white font-bold">
@ -226,25 +187,42 @@ useHead({
</div>
</div>
</div>
<div v-show="isNavSticky" :style="{ height: `${navPlaceholderHeight}px` }"></div>
<div
class="w-full transition"
:class="isNavSticky
? 'fixed top-0 left-0 right-0 z-50 bg-white/95 shadow-sm backdrop-blur dark:bg-slate-800/95'
: 'mb-8 rounded-lg bg-white shadow-sm dark:bg-slate-800'"
>
<!-- 导航菜单 -->
<nav
ref="navRef"
class="scrollbar-hide mx-auto flex w-full max-w-7xl overflow-x-auto px-4 pt-4 pb-2 text-base text-gray-500 font-medium space-x-8 sm:px-6 sm:pb-0 lg:px-8 dark:text-gray-400"
>
<button v-for="(item, index) in tabs" :key="index"
<nav class="scrollbar-hide flex overflow-x-auto pt-4 pb-2 text-base text-gray-500 font-medium space-x-8 sm:pb-0 dark:text-gray-400">
<button
class="whitespace-nowrap border-b-2 pb-3 transition-colors"
:class="activeNavTab === item.id ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent hover:text-gray-700 dark:hover:text-gray-200'"
@click="activeNavTab = item.id"
:class="activeNavTab === '学校概况' ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent hover:text-gray-700 dark:hover:text-gray-200'"
@click="activeNavTab = '学校概况'"
>
{{item.name}}
学校概况
</button>
<button
class="whitespace-nowrap border-b-2 pb-3 transition-colors"
:class="activeNavTab === '历年分数' ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent hover:text-gray-700 dark:hover:text-gray-200'"
@click="activeNavTab = '历年分数'"
>
历年分数
</button>
<button
class="whitespace-nowrap border-b-2 pb-3 transition-colors"
:class="activeNavTab === '招生计划' ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent hover:text-gray-700 dark:hover:text-gray-200'"
@click="activeNavTab = '招生计划'"
>
招生计划
</button>
<button
class="whitespace-nowrap border-b-2 pb-3 transition-colors"
:class="activeNavTab === '开设专业' ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent hover:text-gray-700 dark:hover:text-gray-200'"
@click="activeNavTab = '开设专业'"
>
开设专业
</button>
<button
class="whitespace-nowrap border-b-2 pb-3 transition-colors"
:class="activeNavTab === '录取预测' ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent hover:text-gray-700 dark:hover:text-gray-200'"
@click="activeNavTab = '录取预测'"
>
录取预测
</button>
</nav>
</div>
@ -261,11 +239,15 @@ useHead({
<button
class="absolute left-2 top-1/2 -translate-y-1/2 rounded-full bg-black/30 p-2 text-white backdrop-blur-sm transition hover:bg-black/50"
@click="prevSlide"
><</button>
>
◀
</button>
<button
class="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-black/30 p-2 text-white backdrop-blur-sm transition hover:bg-black/50"
@click="nextSlide"
>></button>
>
▶
</button>
<!-- 轮播指示器 -->
<div class="absolute bottom-4 left-1/2 flex -translate-x-1/2 gap-2">
@ -291,16 +273,68 @@ useHead({
<!-- 快速统计信息栏 -->
<div class="grid grid-cols-2 gap-4 border-b border-gray-100 p-3 md:grid-cols-5 sm:grid-cols-4 dark:border-slate-700">
<div v-for="stat in quickStats" :key="stat.label" class="flex items-start gap-2">
<div class="text-xl" :class="stat.color">
{{ stat.icon }}
<div class="flex items-start gap-2">
<div class="text-xl text-orange-500">
🕒
</div>
<div>
<p class="text-xs text-gray-500 dark:text-gray-400">
{{ stat.label }}
建校时间
</p>
<p class="text-gray-900 font-medium dark:text-white">
{{ stat.value }}
1953年
</p>
</div>
</div>
<div class="flex items-start gap-2">
<div class="text-xl text-purple-500">
⛳
</div>
<div>
<p class="text-xs text-gray-500 dark:text-gray-400">
占地面积
</p>
<p class="text-gray-900 font-medium dark:text-white">
5000亩
</p>
</div>
</div>
<div class="flex items-start gap-2">
<div class="text-xl text-blue-500">
🎓
</div>
<div>
<p class="text-xs text-gray-500 dark:text-gray-400">
主管部门
</p>
<p class="text-gray-900 font-medium dark:text-white">
教育部
</p>
</div>
</div>
<div class="flex items-start gap-2">
<div class="text-xl text-blue-500">
📞
</div>
<div>
<p class="text-xs text-gray-500 dark:text-gray-400">
联系电话
</p>
<p class="text-gray-900 font-medium dark:text-white">
0532-86983086
</p>
</div>
</div>
<div class="flex items-start gap-2">
<div class="text-xl text-blue-500">
📧
</div>
<div>
<p class="text-xs text-gray-500 dark:text-gray-400">
邮箱
</p>
<p class="text-gray-900 font-medium dark:text-white">
zhaosheng@upc.edu.cn
</p>
</div>
</div>
@ -310,7 +344,7 @@ useHead({
<!-- 网格布局：左侧主内容，右侧简单侧边栏(可选) -->
<div class="grid grid-cols-1 gap-6 lg:grid-cols-4">
<!-- 左侧/主体内容 (占3份宽度) -->
<div class="lg:col-span-3">
<div class="lg:col-span-3 space-y-6">
<!-- 子页面组件 -->
<SchoolOverview v-show="activeNavTab === '学校概况'" />
<HistoricalScores v-show="activeNavTab === '历年分数'" />