fix: majorPage
This commit is contained in:
parent
f5b479468b
commit
6a39f754bf
|
|
@ -1,74 +1,245 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
// --- 类型定义 ---
|
||||
interface Ranking {
|
||||
label: string
|
||||
value: number
|
||||
trend?: 'up' | 'down' | 'flat'
|
||||
}
|
||||
<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">
|
||||
|
||||
interface Major {
|
||||
college: string
|
||||
majors: string[]
|
||||
}
|
||||
<!-- 头部卡片: 专业标题与关注 -->
|
||||
<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>
|
||||
|
||||
// --- 状态数据 ---
|
||||
const route = useRoute('/major/[majorCode]')
|
||||
const majorCode = ref('')
|
||||
<!-- 导航栏 -->
|
||||
<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>
|
||||
|
||||
onMounted(() => {
|
||||
<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>
|
||||
|
||||
onUnmounted(() => {
|
||||
<!-- 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>
|
||||
|
||||
watchEffect(() => {
|
||||
majorCode.value = route.params.majorCode
|
||||
})
|
||||
useHead({
|
||||
title: () => { return `${majorCode.value}|艺体志愿宝` },
|
||||
})
|
||||
</script>
|
||||
<!-- 薪资分布 -->
|
||||
<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>
|
||||
|
||||
<template>
|
||||
<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 shadow-sm">
|
||||
</header>
|
||||
<!-- 地区去向 -->
|
||||
<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>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<!-- mx-auto max-w-7xl px-4 py-6 lg:px-8 sm:px-6 -->
|
||||
<main class="mx-auto max-w-7xl">
|
||||
</main>
|
||||
</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>
|
||||
|
||||
<style scoped>
|
||||
/* 隐藏滚动条但保留滚动功能 */
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
/* 自定义滚动条样式 */
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #475569;
|
||||
}
|
||||
</style>
|
||||
// --- 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>
|
||||
Loading…
Reference in New Issue