diff --git a/src/pages/major/[majorCode].vue b/src/pages/major/[majorCode].vue
index 84d0976..a695e70 100644
--- a/src/pages/major/[majorCode].vue
+++ b/src/pages/major/[majorCode].vue
@@ -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">
+      
+      <!-- 头部卡片: 专业标题与关注 -->
+      <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>
 
-interface Major {
-  college: string
-  majors: string[]
-}
+      <!-- 导航栏 -->
+      <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>
 
-// --- 状态数据 ---
-const route = useRoute('/major/[majorCode]')
-const majorCode = ref('')
+      <!-- 内容区域 -->
+      <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>
 
-onMounted(() => {
+        <!-- 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>
 
-onUnmounted(() => {
+          <!-- 地区去向 -->
+          <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>
 
-watchEffect(() => {
-  majorCode.value = route.params.majorCode
-})
-useHead({
-  title: () => { return `${majorCode.value}|艺体志愿宝` },
-})
-</script>
+        <!-- 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">&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">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>
 
-<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>
-
-    <!-- 主要内容区域 -->
-    <!-- mx-auto max-w-7xl px-4 py-6 lg:px-8 sm:px-6 -->
-    <main class="mx-auto max-w-7xl">
-    </main>
+      </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>
\ No newline at end of file