Compare commits
5 Commits
d19e5d1c82
...
4e0c113b38
| Author | SHA1 | Date |
|---|---|---|
|
|
4e0c113b38 | |
|
|
6a39f754bf | |
|
|
f5b479468b | |
|
|
deb900da7b | |
|
|
05ba76f7af |
|
|
@ -183,7 +183,7 @@ onUnmounted(() => {
|
||||||
<input
|
<input
|
||||||
v-model="searchQuery"
|
v-model="searchQuery"
|
||||||
type="text"
|
type="text"
|
||||||
class="h-9 w-50 rounded-l border border-gray-300 py-2 pl-9 pr-4 text-gray-700 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-200 dark:placeholder-slate-500 dark:focus:ring-blue-900"
|
class="h-9 w-50 rounded-l border border-gray-300 py-2 pl-9 pr-4 bg-white text-gray-700 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-200 dark:placeholder-slate-500 dark:focus:ring-blue-900"
|
||||||
placeholder="输入院校名称"
|
placeholder="输入院校名称"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -42,6 +42,9 @@ const scores = ref({
|
||||||
english: '', // 英语
|
english: '', // 英语
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// Dynamic sub-major scores
|
||||||
|
const subMajorScores = ref<Record<string, string>>({})
|
||||||
|
|
||||||
// Errors state
|
// Errors state
|
||||||
const errors = ref({
|
const errors = ref({
|
||||||
examType: '',
|
examType: '',
|
||||||
|
|
@ -54,6 +57,7 @@ const errors = ref({
|
||||||
chinese: '',
|
chinese: '',
|
||||||
english: '',
|
english: '',
|
||||||
},
|
},
|
||||||
|
subMajorScores: {} as Record<string, string>,
|
||||||
})
|
})
|
||||||
|
|
||||||
// --- Computed Properties using Dict System ---
|
// --- Computed Properties using Dict System ---
|
||||||
|
|
@ -81,6 +85,25 @@ const majorCategoryOptions = computed(() => {
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
|
function getSubMajorOptions() {
|
||||||
|
switch (majorCategory.value) {
|
||||||
|
case '表演类':
|
||||||
|
return [
|
||||||
|
{ label: '服装表演', value: '服装表演', formKey: '服装表演' },
|
||||||
|
{ label: '戏剧影视导演', value: '戏剧影视导演', formKey: '戏剧影视导演' },
|
||||||
|
{ label: '戏剧影视表演', value: '戏剧影视表演', formKey: '戏剧影视表演' },
|
||||||
|
]
|
||||||
|
case '音乐类':
|
||||||
|
return [
|
||||||
|
{ label: '音乐表演声乐', value: '音乐表演声乐', formKey: '音乐表演声乐', disabled: selectedSubMajors.value.includes('音乐表演器乐') },
|
||||||
|
{ label: '音乐表演器乐', value: '音乐表演器乐', formKey: '音乐表演器乐', disabled: selectedSubMajors.value.includes('音乐表演声乐') },
|
||||||
|
{ label: '音乐教育', value: '音乐教育', formKey: '音乐教育' },
|
||||||
|
]
|
||||||
|
default:
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function handleElectiveChange(value: string) {
|
function handleElectiveChange(value: string) {
|
||||||
console.warn('handleElectiveChange', value)
|
console.warn('handleElectiveChange', value)
|
||||||
const index = selectedElectives.value.indexOf(value)
|
const index = selectedElectives.value.indexOf(value)
|
||||||
|
|
@ -103,10 +126,35 @@ function handleMajorCategoryChange(val: any) {
|
||||||
errors.value.majorCategory = ''
|
errors.value.majorCategory = ''
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getSubMajorFormKey(subMajorValue: string): string {
|
||||||
|
const options = getSubMajorOptions()
|
||||||
|
const option = options.find(opt => opt.value === subMajorValue)
|
||||||
|
return option?.formKey || ''
|
||||||
|
}
|
||||||
|
|
||||||
function handleSubMajorChange(val: any) {
|
function handleSubMajorChange(val: any) {
|
||||||
// 可以在这里处理额外的逻辑
|
// 可以在这里处理额外的逻辑
|
||||||
console.warn(val)
|
console.warn(val)
|
||||||
errors.value.subMajors = ''
|
errors.value.subMajors = ''
|
||||||
|
|
||||||
|
// 获取当前选中的子专业选项
|
||||||
|
const options = getSubMajorOptions()
|
||||||
|
const selectedOptions = options.filter(opt => val.includes(opt.value))
|
||||||
|
|
||||||
|
// 初始化新选中的子专业成绩输入框
|
||||||
|
selectedOptions.forEach(opt => {
|
||||||
|
if (!subMajorScores.value[opt.formKey]) {
|
||||||
|
subMajorScores.value[opt.formKey] = ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 移除未选中的子专业成绩
|
||||||
|
const currentFormKeys = selectedOptions.map(opt => opt.formKey)
|
||||||
|
Object.keys(subMajorScores.value).forEach(key => {
|
||||||
|
if (!currentFormKeys.includes(key)) {
|
||||||
|
delete subMajorScores.value[key]
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- Validation Logic ---
|
// --- Validation Logic ---
|
||||||
|
|
@ -190,6 +238,11 @@ function validateForm() {
|
||||||
// --- Submit ---
|
// --- Submit ---
|
||||||
async function handleSubmit() {
|
async function handleSubmit() {
|
||||||
if (validateForm()) {
|
if (validateForm()) {
|
||||||
|
if (getSubMajorOptions().length == 0){
|
||||||
|
selectedSubMajors.value = []
|
||||||
|
subMajorScores.value = {}
|
||||||
|
}
|
||||||
|
|
||||||
// 组装数据
|
// 组装数据
|
||||||
const formData: ScoreFormData = {
|
const formData: ScoreFormData = {
|
||||||
examType: examType.value,
|
examType: examType.value,
|
||||||
|
|
@ -205,7 +258,7 @@ async function handleSubmit() {
|
||||||
subjectList: selectedElectives.value,
|
subjectList: selectedElectives.value,
|
||||||
professionalCategory: majorCategory.value,
|
professionalCategory: majorCategory.value,
|
||||||
professionalCategoryChildren: selectedSubMajors.value,
|
professionalCategoryChildren: selectedSubMajors.value,
|
||||||
professionalCategoryChildrenScore: {},
|
professionalCategoryChildrenScore: subMajorScores.value,
|
||||||
professionalScore: Number(scores.value.unified) || 0,
|
professionalScore: Number(scores.value.unified) || 0,
|
||||||
culturalScore: Number(scores.value.culture) || 0,
|
culturalScore: Number(scores.value.culture) || 0,
|
||||||
englishScore: Number(scores.value.english) || 0,
|
englishScore: Number(scores.value.english) || 0,
|
||||||
|
|
@ -243,6 +296,11 @@ function initForm() {
|
||||||
scores.value.culture = info.culturalScore?.toString() || ''
|
scores.value.culture = info.culturalScore?.toString() || ''
|
||||||
scores.value.chinese = info.chineseScore?.toString() || ''
|
scores.value.chinese = info.chineseScore?.toString() || ''
|
||||||
scores.value.english = info.englishScore?.toString() || ''
|
scores.value.english = info.englishScore?.toString() || ''
|
||||||
|
|
||||||
|
// 回显子专业成绩
|
||||||
|
if (info.professionalCategoryChildrenScore) {
|
||||||
|
subMajorScores.value = { ...info.professionalCategoryChildrenScore }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -278,6 +336,7 @@ defineExpose({
|
||||||
majorCategory.value = ''
|
majorCategory.value = ''
|
||||||
selectedSubMajors.value = []
|
selectedSubMajors.value = []
|
||||||
scores.value = { unified: '', culture: '', chinese: '', english: '' }
|
scores.value = { unified: '', culture: '', chinese: '', english: '' }
|
||||||
|
subMajorScores.value = {}
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -367,6 +426,30 @@ defineExpose({
|
||||||
成绩输入
|
成绩输入
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
|
<!-- Dynamic Sub-Major Scores -->
|
||||||
|
<div v-if="selectedSubMajors.length > 0" class="mb-4">
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div
|
||||||
|
v-for="subMajor in selectedSubMajors"
|
||||||
|
:key="subMajor"
|
||||||
|
class="mb-4"
|
||||||
|
>
|
||||||
|
<label class="mb-2 block text-sm font-medium">{{ subMajor }}成绩</label>
|
||||||
|
<input
|
||||||
|
v-model="subMajorScores[getSubMajorFormKey(subMajor)]"
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
max="300"
|
||||||
|
placeholder="0-300"
|
||||||
|
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
<div v-if="errors.subMajorScores[getSubMajorFormKey(subMajor)]" class="mt-2 text-sm text-red-600">
|
||||||
|
{{ errors.subMajorScores[getSubMajorFormKey(subMajor)] }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Unified Exam Score -->
|
<!-- Unified Exam Score -->
|
||||||
<div class="grid grid-cols-2 gap-4">
|
<div class="grid grid-cols-2 gap-4">
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,245 @@
|
||||||
|
<template>
|
||||||
|
<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 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">产品设计</h1>
|
||||||
|
<div class="flex flex-wrap gap-2 text-sm">
|
||||||
|
<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">设计学类</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">
|
||||||
|
+ 关注
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<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'"
|
||||||
|
>
|
||||||
|
{{ tab.name }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 内容区域 -->
|
||||||
|
<div class="bg-white rounded shadow-sm p-6 min-h-[500px]">
|
||||||
|
|
||||||
|
<!-- Panel 1: 基本介绍 -->
|
||||||
|
<div v-if="currentTab === 'intro'" class="space-y-8">
|
||||||
|
<ExpandableSection title="专业概括">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<span class="font-bold text-gray-900">是什么:</span>
|
||||||
|
产品设计主要研究艺术学、设计学、计算机技术等方面的基本知识和技能,进行工业设计、外观设计、结构设计、造型设计以及交互设计等。例如:勺子、杯子的造型设计,衣柜、橱柜的结构设计,软件界面的设计等。关键词:杯子 衣柜 软件界面 计算机
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="font-bold text-gray-900">学什么:</span>
|
||||||
|
《工业美术史》、《工业设计史》、《设计手绘》、《色彩传达》、《产品结构设计》、《产品造型设计》、《产品创新设计》、《产品造型材料工艺》、《产品语义设计》、《计算机辅助设计》 部分高校按以下专业方向培养:服装设计、家具设计、数字设计、应用设计、纺织品设计、产品造型设计、珠宝首饰设计、鞋类与工程、鞋类与皮具设计。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ExpandableSection>
|
||||||
|
|
||||||
|
<ExpandableSection title="培养方向">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<span class="font-bold text-gray-900">培养目标:</span>
|
||||||
|
本专业培养具有“厚基础、宽口径、重能力”、“知识、能力、素质”协调发展,具有扎实的工业设计基础理论知识及产品造型能力、良好的职业技能和职业素质,能在企事业单位、专业设计部门、教学科研单位从事以产品创新为重点的设计、管理、科研或教学工作,也能从事与产品设计相关的视觉传达设计、信息设计、环境设施设计或展示设计工作的应用型研究型人才。
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="font-bold text-gray-900">培养要求:</span>
|
||||||
|
本专业在能力结构方面要求学生应具有一定的设计创新思维意识,初步具备综合运用所学知识,分析和解决工业产品造型设计过程中遇到的研究、开发、设计等方面问题的能力;能清晰地表达设计思想,熟悉产品设计的程序与方法。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ExpandableSection>
|
||||||
|
|
||||||
|
<ExpandableSection title="主要课程">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<span class="font-bold text-gray-900">主干学科:</span>
|
||||||
|
产品设计方法学、人机工程学、材料与工艺学。
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="font-bold text-gray-900">核心课程:</span>
|
||||||
|
工业设计史、产品设计方法学、产品设计效果图表现技法、人机工程学、制图、模型制作与工艺、产品调研方法、产品设计报告书制作、数字化产品设计及产品设计相关软件等基础理论知识以及基本方法、中外工艺美术史、设计学(美学、心理学、公关关系学)、造型基础、构成(平面、色彩、立体构成)、世界工业设计发展史等相关课程等。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ExpandableSection>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Panel 2: 就业分析 -->
|
||||||
|
<div v-if="currentTab === 'job'" class="space-y-12">
|
||||||
|
|
||||||
|
<!-- 职业分布 -->
|
||||||
|
<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">其他</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 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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 薪资分布 -->
|
||||||
|
<div>
|
||||||
|
<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">
|
||||||
|
<tr>
|
||||||
|
<th class="px-6 py-4">岗位</th>
|
||||||
|
<th class="px-6 py-4">应届生月薪</th>
|
||||||
|
<th class="px-6 py-4">毕业1-3年月薪</th>
|
||||||
|
<th class="px-6 py-4">毕业3-5年月薪</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y divide-gray-100">
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4">家具 (家居用品设计)</td>
|
||||||
|
<td class="px-6 py-4">6547~10881</td>
|
||||||
|
<td class="px-6 py-4">8481~15607</td>
|
||||||
|
<td class="px-6 py-4">11420~20758</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4">工业 (产品设计)</td>
|
||||||
|
<td class="px-6 py-4">6103~11044</td>
|
||||||
|
<td class="px-6 py-4">8751~13505</td>
|
||||||
|
<td class="px-6 py-4">11864~20033</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 地区去向 -->
|
||||||
|
<div>
|
||||||
|
<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">去北上广深比例</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">{{ 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">{{ city.percent }}%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 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">
|
||||||
|
<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">{{ 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">{{ tag }}</span>
|
||||||
|
</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">排名: <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"><</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">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">></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
// --- Tab Logic ---
|
||||||
|
const currentTab = ref('intro');
|
||||||
|
const tabs = [
|
||||||
|
{ id: 'intro', name: '基本介绍' },
|
||||||
|
{ id: 'job', name: '就业分析' },
|
||||||
|
{ id: 'school', name: '开设院校' }
|
||||||
|
];
|
||||||
|
|
||||||
|
// --- Data for School List ---
|
||||||
|
const schools = [
|
||||||
|
{
|
||||||
|
name: '北京工业大学',
|
||||||
|
logo: 'https://ui-avatars.com/api/?name=BJ&background=0D8ABC&color=fff', // Placeholder
|
||||||
|
tags: ['211', '双一流', '省属重点'],
|
||||||
|
location: '北京 朝阳区 工科 公办',
|
||||||
|
rank: 63,
|
||||||
|
grade: 'C'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '北京理工大学',
|
||||||
|
logo: 'https://ui-avatars.com/api/?name=BIT&background=166534&color=fff', // Placeholder
|
||||||
|
tags: ['985', '211', '双一流', '省部共建'],
|
||||||
|
location: '北京 海淀区 工科 公办',
|
||||||
|
rank: 18,
|
||||||
|
grade: 'B'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// --- Data for Cities (Mock) ---
|
||||||
|
const cities = [
|
||||||
|
{ name: '深圳', percent: 20 },
|
||||||
|
{ name: '上海', percent: 20 },
|
||||||
|
{ name: '北京', percent: 17 },
|
||||||
|
{ name: '广州', percent: 13 },
|
||||||
|
{ name: '杭州', percent: 8 },
|
||||||
|
{ name: '成都', percent: 4 },
|
||||||
|
{ name: '东莞', percent: 4 },
|
||||||
|
];
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
@ -112,6 +112,18 @@ const stopCarousel = () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 关注按钮点击事件
|
||||||
|
const handleFollow = () => {
|
||||||
|
console.log('关注学校:', schoolCode.value)
|
||||||
|
// TODO: 实现关注逻辑
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加入对比按钮点击事件
|
||||||
|
const handleCompare = () => {
|
||||||
|
console.log('加入对比:', schoolCode.value)
|
||||||
|
// TODO: 实现对比逻辑
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
startCarousel()
|
startCarousel()
|
||||||
})
|
})
|
||||||
|
|
@ -133,29 +145,50 @@ useHead({
|
||||||
<!-- 顶部导航 & Header sticky -->
|
<!-- 顶部导航 & Header sticky -->
|
||||||
<header class="top-0 z-50 shadow-sm">
|
<header class="top-0 z-50 shadow-sm">
|
||||||
<div class="mb-8 mt-8 rounded-lg bg-white dark:bg-slate-800">
|
<div class="mb-8 mt-8 rounded-lg bg-white dark:bg-slate-800">
|
||||||
<div class="h-16 flex items-center justify-between">
|
<div class="h-20 flex items-center justify-between">
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-4">
|
||||||
<div class="h-12 w-12 flex items-center justify-center rounded-full bg-blue-900 text-xs text-white font-bold">
|
<div class="h-16 w-16 flex items-center justify-center rounded-full bg-blue-900 text-sm text-white font-bold">
|
||||||
Logo
|
Logo
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h1 class="text-xl text-gray-900 font-bold dark:text-white">
|
<h1 class="text-2xl text-gray-900 font-bold dark:text-white">
|
||||||
中国石油大学(华东)
|
中国石油大学(华东)
|
||||||
</h1>
|
</h1>
|
||||||
<div class="flex gap-2 text-xs text-gray-500 dark:text-gray-400">
|
<div class="flex gap-2 text-sm text-gray-500 dark:text-gray-400">
|
||||||
<span>公办</span><span>|</span><span>理工类</span><span>|</span><span>教育部直属</span>
|
<span>公办</span><span>|</span><span>理工类</span><span>|</span><span>教育部直属</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 标签 -->
|
<!-- 标签 -->
|
||||||
<div class="ml-4 hidden gap-1 md:flex">
|
<div class="ml-4 hidden gap-1 md:flex">
|
||||||
<span class="border border-orange-500 rounded px-1.5 py-0.5 text-xs text-orange-500">211</span>
|
<span class="border border-orange-500 rounded px-2 py-0.5 text-sm text-orange-500">211</span>
|
||||||
<span class="border border-orange-500 rounded px-1.5 py-0.5 text-xs text-orange-500">双一流</span>
|
<span class="border border-orange-500 rounded px-2 py-0.5 text-sm text-orange-500">双一流</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 关注和对比按钮 -->
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<button
|
||||||
|
class="flex items-center gap-1.5 rounded-full border-2 border-orange-500 px-4 py-2 text-sm text-orange-500 font-medium transition hover:bg-orange-500 hover:text-white"
|
||||||
|
@click="handleFollow"
|
||||||
|
>
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||||||
|
</svg>
|
||||||
|
关注
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="flex items-center gap-1.5 rounded-full bg-orange-500 px-4 py-2 text-sm text-white font-medium transition hover:bg-orange-600"
|
||||||
|
@click="handleCompare"
|
||||||
|
>
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||||
|
</svg>
|
||||||
|
加入对比
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 导航菜单 -->
|
<!-- 导航菜单 -->
|
||||||
<nav class="scrollbar-hide flex overflow-x-auto pb-2 text-sm text-gray-500 font-medium space-x-8 sm:pb-0 dark:text-gray-400">
|
<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
|
<button
|
||||||
class="whitespace-nowrap border-b-2 pb-3 transition-colors"
|
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'"
|
:class="activeNavTab === '学校概况' ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent hover:text-gray-700 dark:hover:text-gray-200'"
|
||||||
|
|
|
||||||
|
|
@ -153,6 +153,7 @@ async function loadMore(reset = false) {
|
||||||
const res = await getUserMajorList({
|
const res = await getUserMajorList({
|
||||||
page: page.value,
|
page: page.value,
|
||||||
size: size.value,
|
size: size.value,
|
||||||
|
keyword: currentKeyword.value,
|
||||||
probability,
|
probability,
|
||||||
batch: currentBatchTab.value,
|
batch: currentBatchTab.value,
|
||||||
batch2: currentBatch2Tab.value,
|
batch2: currentBatch2Tab.value,
|
||||||
|
|
@ -455,6 +456,7 @@ function handleDataChange(data: { keyword: string, filters: FilterState }) {
|
||||||
console.warn('发起请求:', data.keyword, data.filters)
|
console.warn('发起请求:', data.keyword, data.filters)
|
||||||
currentKeyword.value = data.keyword
|
currentKeyword.value = data.keyword
|
||||||
currentFilters.value = data.filters
|
currentFilters.value = data.filters
|
||||||
|
loadMore(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 用于记录当前鼠标是否悬停在手柄上,悬停时该行的索引存入这里
|
// 用于记录当前鼠标是否悬停在手柄上,悬停时该行的索引存入这里
|
||||||
|
|
|
||||||
|
|
@ -26,6 +26,7 @@ declare module 'vue-router/auto-routes' {
|
||||||
'/demo/pop-confirm': RouteRecordInfo<'/demo/pop-confirm', '/demo/pop-confirm', Record<never, never>, Record<never, never>>,
|
'/demo/pop-confirm': RouteRecordInfo<'/demo/pop-confirm', '/demo/pop-confirm', Record<never, never>, Record<never, never>>,
|
||||||
'/dict-demo': RouteRecordInfo<'/dict-demo', '/dict-demo', Record<never, never>, Record<never, never>>,
|
'/dict-demo': RouteRecordInfo<'/dict-demo', '/dict-demo', Record<never, never>, Record<never, never>>,
|
||||||
'/hi/[name]': RouteRecordInfo<'/hi/[name]', '/hi/:name', { name: ParamValue<true> }, { name: ParamValue<false> }>,
|
'/hi/[name]': RouteRecordInfo<'/hi/[name]', '/hi/:name', { name: ParamValue<true> }, { name: ParamValue<false> }>,
|
||||||
|
'/major/[majorCode]': RouteRecordInfo<'/major/[majorCode]', '/major/:majorCode', { majorCode: ParamValue<true> }, { majorCode: ParamValue<false> }>,
|
||||||
'/majors': RouteRecordInfo<'/majors', '/majors', Record<never, never>, Record<never, never>>,
|
'/majors': RouteRecordInfo<'/majors', '/majors', Record<never, never>, Record<never, never>>,
|
||||||
'/privacy-policy': RouteRecordInfo<'/privacy-policy', '/privacy-policy', Record<never, never>, Record<never, never>>,
|
'/privacy-policy': RouteRecordInfo<'/privacy-policy', '/privacy-policy', Record<never, never>, Record<never, never>>,
|
||||||
'/README': RouteRecordInfo<'/README', '/README', Record<never, never>, Record<never, never>>,
|
'/README': RouteRecordInfo<'/README', '/README', Record<never, never>, Record<never, never>>,
|
||||||
|
|
|
||||||
|
|
@ -22,21 +22,21 @@ export interface DictType {
|
||||||
const staticDicts: DictType = {
|
const staticDicts: DictType = {
|
||||||
// 专业类别
|
// 专业类别
|
||||||
professionalCategory: [
|
professionalCategory: [
|
||||||
{ label: '美术与设计类', value: 'science', color: '#108ee9' },
|
{ label: '美术与设计类', value: '美术与设计类',},
|
||||||
{ label: '播音与主持类', value: 'liberal_arts', color: '#2db7f5' },
|
{ label: '播音与主持类', value: '播音与主持类',},
|
||||||
{ label: '表演类', value: 'art', color: '#87d068' },
|
{ label: '表演类', value: '表演类',},
|
||||||
{ label: '音乐类', value: 'sports', color: '#ff5500' },
|
{ label: '音乐类', value: '音乐类',},
|
||||||
{ label: '舞蹈类', value: 'sports', color: '#ff5500' },
|
{ label: '舞蹈类', value: '舞蹈类',},
|
||||||
{ label: '书法类', value: 'sports', color: '#ff5500' },
|
{ label: '书法类', value: '书法类',},
|
||||||
{ label: '戏曲类', value: 'sports', color: '#ff5500' },
|
{ label: '戏曲类', value: '戏曲类',},
|
||||||
{ label: '体育类', value: 'sports', color: '#ff5500' },
|
{ label: '体育类', value: '体育类',},
|
||||||
],
|
],
|
||||||
|
|
||||||
// 学历层次
|
// 学历层次
|
||||||
educationalLevel: [
|
educationalLevel: [
|
||||||
{ label: '本科', value: 'undergraduate', color: '#108ee9' },
|
{ label: '本科', value: '本科', color: '#108ee9' },
|
||||||
{ label: '专科', value: 'college', color: '#2db7f5' },
|
{ label: '专科', value: '专科', color: '#2db7f5' },
|
||||||
{ label: '研究生', value: 'graduate', color: '#87d068' },
|
{ label: '研究生', value: '研究生', color: '#87d068' },
|
||||||
],
|
],
|
||||||
|
|
||||||
// 省份
|
// 省份
|
||||||
|
|
@ -80,12 +80,12 @@ const staticDicts: DictType = {
|
||||||
// { label: '语文', value: 'chinese', color: '#108ee9' },
|
// { label: '语文', value: 'chinese', color: '#108ee9' },
|
||||||
// { label: '数学', value: 'mathematics', color: '#2db7f5' },
|
// { label: '数学', value: 'mathematics', color: '#2db7f5' },
|
||||||
// { label: '英语', value: 'english', color: '#87d068' },
|
// { label: '英语', value: 'english', color: '#87d068' },
|
||||||
{ label: '物理', value: 'physics', color: '#ff5500' },
|
{ label: '物理', value: '物理'},
|
||||||
{ label: '化学', value: 'chemistry', color: '#f5222d' },
|
{ label: '化学', value: '化学'},
|
||||||
{ label: '生物', value: 'biology', color: '#fa8c16' },
|
{ label: '生物', value: '生物'},
|
||||||
{ label: '政治', value: 'politics', color: '#faad14' },
|
{ label: '政治', value: '政治'},
|
||||||
{ label: '历史', value: 'history', color: '#a0d911' },
|
{ label: '历史', value: '历史'},
|
||||||
{ label: '地理', value: 'geography', color: '#52c41a' },
|
{ label: '地理', value: '地理'},
|
||||||
],
|
],
|
||||||
|
|
||||||
// 性别
|
// 性别
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue