This commit is contained in:
zhouwentao 2026-02-01 14:51:06 +08:00
parent ef087feb4d
commit 05ba76f7af
1 changed files with 41 additions and 8 deletions

View File

@ -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'"