426 lines
16 KiB
Vue
426 lines
16 KiB
Vue
<script setup lang="ts">
|
||
import { computed, ref, onMounted, onUnmounted } from 'vue'
|
||
|
||
// 导入子组件
|
||
import SchoolOverview from '~/components/school/SchoolOverview.vue'
|
||
import HistoricalScores from '~/components/school/HistoricalScores.vue'
|
||
import EnrollmentPlan from '~/components/school/EnrollmentPlan.vue'
|
||
import Majors from '~/components/school/Majors.vue'
|
||
import AdmissionPrediction from '~/components/school/AdmissionPrediction.vue'
|
||
|
||
// --- 类型定义 ---
|
||
interface Ranking {
|
||
label: string
|
||
value: number
|
||
trend?: 'up' | 'down' | 'flat'
|
||
}
|
||
|
||
interface Major {
|
||
college: string
|
||
majors: string[]
|
||
}
|
||
|
||
// --- 状态数据 ---
|
||
const route = useRoute('/school/[schoolCode]')
|
||
const schoolCode = ref('')
|
||
|
||
const activeLocationTab = ref('唐岛湾校区')
|
||
const activeNavTab = ref('学校概况')
|
||
|
||
// 轮播图相关
|
||
const currentSlide = ref(0)
|
||
const carouselInterval = ref<number | null>(null)
|
||
const bannerImages = [
|
||
'https://images.unsplash.com/photo-1541339907198-e08756dedf3f?w=1200&h=400&fit=crop',
|
||
'https://images.unsplash.com/photo-1562774053-701939374585?w=1200&h=400&fit=crop',
|
||
'https://images.unsplash.com/photo-1606761568499-6d2451b23c66?w=1200&h=400&fit=crop',
|
||
'https://images.unsplash.com/photo-1591380542610-f6263b6884b3?w=1200&h=400&fit=crop',
|
||
]
|
||
|
||
// 基础信息数据
|
||
// const stats: StatItem[] = [
|
||
// { label: '建校时间', value: '1953年', icon: '📅' },
|
||
// { label: '占地面积', value: '5000亩', icon: '⛳' },
|
||
// { label: '主管部门', value: '教育部', icon: '🏛️' },
|
||
// { label: '博士点', value: '16个', icon: '🎓' },
|
||
// { label: '硕士点', value: '33个', icon: '📜' },
|
||
// { label: '国家重点学科', value: '5个', icon: '⭐' },
|
||
// ];
|
||
|
||
const rankings: Ranking[] = [
|
||
{ label: '软科综合', value: 67 },
|
||
{ label: '校友会综合', value: 80 },
|
||
{ label: 'US世界', value: 500 },
|
||
{ label: '人气值排名', value: 70 },
|
||
]
|
||
|
||
// 院系设置数据 (模拟部分)
|
||
const departments: Major[] = [
|
||
{ college: '地球科学与技术学院', majors: ['勘查技术与工程', '地质学', '资源勘查工程', '地球物理学'] },
|
||
{ college: '石油工程学院', majors: ['海洋油气工程', '石油工程', '碳储科学与工程'] },
|
||
{ college: '化学化工学院', majors: ['化学', '化学工程与工艺', '应用化学', '环境工程', '能源化学工程'] },
|
||
{ college: '机电工程学院', majors: ['安全工程', '工业设计', '智能制造工程', '机械设计制造及其自动化'] },
|
||
{ college: '储运与建筑工程学院', majors: ['土木工程', '工程力学', '建筑环境与能源应用工程', '油气储运工程'] },
|
||
]
|
||
|
||
// 校园配置数据
|
||
const facilities = [
|
||
{ name: '4人/间', icon: '🛏️' },
|
||
{ name: '5个食堂', icon: '🍚' },
|
||
{ name: '上床下桌', icon: '🪑' },
|
||
{ name: '独立卫浴', icon: '🚿' },
|
||
{ name: '有空调', icon: '❄️' },
|
||
{ name: '有游泳馆', icon: '🏊' },
|
||
]
|
||
|
||
// 校园风光图片
|
||
const sceneryImages = [
|
||
'https://images.unsplash.com/photo-1564981797816-1043664bf78d?w=400&h=300&fit=crop',
|
||
'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=400&h=300&fit=crop',
|
||
'https://images.unsplash.com/photo-1541829070764-84a7d30dd3f3?w=400&h=300&fit=crop',
|
||
'https://images.unsplash.com/photo-1607237138185-eedd9c632b0b?w=400&h=300&fit=crop',
|
||
]
|
||
|
||
// 校区地址数据
|
||
const locationInfo = computed(() => {
|
||
return activeLocationTab.value === '唐岛湾校区'
|
||
? { address: '山东省青岛市黄岛区长江西路66号', details: '附近3km内分布着 58个餐饮场所...' }
|
||
: { address: '山东省东营市...', details: '老校区历史悠久...' }
|
||
})
|
||
|
||
// 轮播图函数
|
||
const nextSlide = () => {
|
||
currentSlide.value = (currentSlide.value + 1) % bannerImages.length
|
||
}
|
||
|
||
const prevSlide = () => {
|
||
currentSlide.value = (currentSlide.value - 1 + bannerImages.length) % bannerImages.length
|
||
}
|
||
|
||
const goToSlide = (index: number) => {
|
||
currentSlide.value = index
|
||
}
|
||
|
||
const startCarousel = () => {
|
||
carouselInterval.value = window.setInterval(nextSlide, 4000)
|
||
}
|
||
|
||
const stopCarousel = () => {
|
||
if (carouselInterval.value) {
|
||
clearInterval(carouselInterval.value)
|
||
carouselInterval.value = null
|
||
}
|
||
}
|
||
|
||
// 关注按钮点击事件
|
||
const handleFollow = () => {
|
||
console.log('关注学校:', schoolCode.value)
|
||
// TODO: 实现关注逻辑
|
||
}
|
||
|
||
// 加入对比按钮点击事件
|
||
const handleCompare = () => {
|
||
console.log('加入对比:', schoolCode.value)
|
||
// TODO: 实现对比逻辑
|
||
}
|
||
|
||
onMounted(() => {
|
||
startCarousel()
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
stopCarousel()
|
||
})
|
||
|
||
watchEffect(() => {
|
||
schoolCode.value = route.params.schoolCode
|
||
})
|
||
useHead({
|
||
title: () => { return `${schoolCode.value}|艺体志愿宝` },
|
||
})
|
||
</script>
|
||
|
||
<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">
|
||
<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">
|
||
Logo
|
||
</div>
|
||
<div>
|
||
<h1 class="text-2xl text-gray-900 font-bold dark:text-white">
|
||
中国石油大学（华东）
|
||
</h1>
|
||
<div class="flex gap-2 text-sm text-gray-500 dark:text-gray-400">
|
||
<span>公办</span><span>|</span><span>理工类</span><span>|</span><span>教育部直属</span>
|
||
</div>
|
||
</div>
|
||
<!-- 标签 -->
|
||
<div class="ml-4 hidden gap-1 md:flex">
|
||
<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-2 py-0.5 text-sm text-orange-500">双一流</span>
|
||
</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>
|
||
|
||
<!-- 导航菜单 -->
|
||
<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 === '学校概况' ? '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>
|
||
<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>
|
||
</header>
|
||
|
||
<!-- 主要内容区域 -->
|
||
<!-- mx-auto max-w-7xl px-4 py-6 lg:px-8 sm:px-6 -->
|
||
<main class="mx-auto max-w-7xl">
|
||
<!-- 顶部 Banner 信息卡片 -->
|
||
<div class="mb-6 overflow-hidden rounded-lg bg-white shadow dark:bg-slate-800">
|
||
<!-- 轮播图 -->
|
||
<div class="relative h-48 bg-cover bg-center md:h-64" :style="{ backgroundImage: `url(${bannerImages[currentSlide]})` }">
|
||
<!-- 左右切换按钮 -->
|
||
<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
|
||
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>
|
||
|
||
<!-- 轮播指示器 -->
|
||
<div class="absolute bottom-4 left-1/2 flex -translate-x-1/2 gap-2">
|
||
<button
|
||
v-for="(img, index) in bannerImages"
|
||
:key="index"
|
||
class="h-2 w-2 rounded-full transition-all"
|
||
:class="currentSlide === index ? 'w-8 bg-white' : 'bg-white/50'"
|
||
@click="goToSlide(index)"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 右上角按钮 -->
|
||
<div class="absolute bottom-4 right-4 flex gap-2">
|
||
<button class="rounded bg-black/50 px-3 py-1 text-sm text-white backdrop-blur-sm hover:bg-black/70">
|
||
📺 视频
|
||
</button>
|
||
<button class="rounded bg-white/90 px-3 py-1 text-sm text-gray-800 backdrop-blur-sm hover:bg-white">
|
||
📷 校园风光
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 快速统计信息栏 -->
|
||
<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 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">
|
||
建校时间
|
||
</p>
|
||
<p class="text-gray-900 font-medium dark:text-white">
|
||
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>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 网格布局：左侧主内容，右侧简单侧边栏(可选) -->
|
||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-4">
|
||
<!-- 左侧/主体内容 (占3份宽度) -->
|
||
<div class="lg:col-span-3 space-y-6">
|
||
<!-- 子页面组件 -->
|
||
<SchoolOverview v-show="activeNavTab === '学校概况'" />
|
||
<HistoricalScores v-show="activeNavTab === '历年分数'" />
|
||
<EnrollmentPlan v-show="activeNavTab === '招生计划'" />
|
||
<Majors v-show="activeNavTab === '开设专业'" />
|
||
<AdmissionPrediction v-show="activeNavTab === '录取预测'" />
|
||
</div>
|
||
<!-- 右侧侧边栏 (保留男女比例，其他已移除) -->
|
||
<div class="hidden lg:col-span-1 lg:block space-y-6">
|
||
<!-- 男女比例 -->
|
||
<div class="rounded-lg bg-white p-6 shadow-sm dark:bg-slate-800">
|
||
<h3 class="mb-4 text-gray-900 font-bold dark:text-white">
|
||
男女比例
|
||
</h3>
|
||
<div class="mb-2 flex items-end justify-between">
|
||
<div class="text-xl text-blue-500 font-bold">
|
||
♂ 70.12%
|
||
</div>
|
||
<div class="text-xl text-pink-500 font-bold">
|
||
♀ 29.88%
|
||
</div>
|
||
</div>
|
||
<!-- 进度条 -->
|
||
<div class="h-2 w-full flex overflow-hidden rounded-full bg-gray-200 dark:bg-slate-700">
|
||
<div class="h-full bg-blue-500" style="width: 70%" />
|
||
<div class="h-full bg-pink-500" style="width: 30%" />
|
||
</div>
|
||
<div class="mt-1 flex justify-between text-xs text-gray-400">
|
||
<span>男生</span>
|
||
<span>女生</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 此处原有：毕业去向、分数推荐、留言板、高考工具箱等，均已移除 -->
|
||
|
||
<!-- 占位：如果觉得右侧太空，可以放联系方式或者简单的文字链接 -->
|
||
<div class="border border-blue-100 rounded-lg bg-blue-50 p-4 dark:border-slate-600 dark:bg-slate-700/50">
|
||
<h4 class="mb-2 text-sm text-blue-800 font-bold dark:text-blue-300">
|
||
招生办联系方式
|
||
</h4>
|
||
<p class="mb-1 text-xs text-gray-600 dark:text-gray-400">
|
||
电话：0532-86983086
|
||
</p>
|
||
<p class="text-xs text-gray-600 dark:text-gray-400">
|
||
邮箱：zhaosheng@upc.edu.cn
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 隐藏滚动条但保留滚动功能 */
|
||
.scrollbar-hide::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.scrollbar-hide {
|
||
-ms-overflow-style: none;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
/* 自定义滚动条样式 */
|
||
.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>
|