675 lines
23 KiB
Vue
675 lines
23 KiB
Vue
<!-- eslint-disable no-console -->
|
||
<script setup lang="ts">
|
||
defineOptions({
|
||
name: 'IndexPage',
|
||
})
|
||
|
||
useHead({
|
||
title: '艺体志愿宝 - 专业的艺术体育类志愿填报辅助平台',
|
||
})
|
||
|
||
// User store for login status
|
||
const userStore = useUserStore()
|
||
|
||
const responseMenus = [
|
||
{
|
||
url: '/universities',
|
||
label: '查大学',
|
||
icon: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4',
|
||
|
||
animationDelay: '0.1s',
|
||
darkMode: true,
|
||
},
|
||
{
|
||
url: '/majors',
|
||
label: '查专业',
|
||
icon: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z',
|
||
animationDelay: '0.2s',
|
||
darkMode: true,
|
||
},
|
||
{
|
||
url: '/cutoff-scores',
|
||
label: '省控线',
|
||
icon: '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',
|
||
animationDelay: '0.3s',
|
||
darkMode: true,
|
||
},
|
||
{
|
||
url: '/culture-test',
|
||
label: '测文化',
|
||
icon: 'M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253',
|
||
animationDelay: '0.4s',
|
||
darkMode: true,
|
||
},
|
||
{
|
||
url: '/rank-checker',
|
||
label: '查位次',
|
||
icon: 'M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z',
|
||
animationDelay: '0.5s',
|
||
darkMode: true,
|
||
},
|
||
{
|
||
url: '/calculator',
|
||
label: '算投档',
|
||
icon: 'M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z',
|
||
animationDelay: '0.6s',
|
||
darkMode: true,
|
||
},
|
||
{
|
||
url: '/sports-calculator',
|
||
label: '体育计分器',
|
||
icon: 'M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 1-4 4-4 1.657 0 3 .895 3 2 0 1-1 2-1 2s1.5.5 2 1.5c.5 1 .5 2.5-.5 3.5zM10 11l2 2 4-4',
|
||
animationDelay: '0.7s',
|
||
darkMode: true,
|
||
},
|
||
{
|
||
url: '/regulations',
|
||
label: '招生章程',
|
||
icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',
|
||
animationDelay: '0.8s',
|
||
darkMode: true,
|
||
},
|
||
]
|
||
|
||
// Carousel images
|
||
const carouselImages = [
|
||
{
|
||
id: 1,
|
||
imageUrl: 'https://cdn.jsdelivr.net/gh/zwt13703/note-gen-image-sync@main/d7e9af38-9292-4e7a-bb24-9321c8e1b931.png',
|
||
linkUrl: '/simulate',
|
||
altText: '艺术考生',
|
||
},
|
||
{
|
||
id: 2,
|
||
imageUrl: 'https://cdn.jsdelivr.net/gh/zwt13703/note-gen-image-sync@main/13274cb8-2c88-452b-b70b-9ca4e603606a.jpeg',
|
||
linkUrl: '/universities',
|
||
altText: '体育考生',
|
||
},
|
||
]
|
||
|
||
// Carousel state
|
||
const currentSlide = ref(0)
|
||
const isLoginModalOpen = ref(false)
|
||
let carouselInterval: any
|
||
|
||
// Auto-play carousel
|
||
function startCarousel() {
|
||
carouselInterval = setInterval(() => {
|
||
currentSlide.value = (currentSlide.value + 1) % carouselImages.length
|
||
}, 5000)
|
||
}
|
||
|
||
function stopCarousel() {
|
||
if (carouselInterval) {
|
||
clearInterval(carouselInterval)
|
||
}
|
||
}
|
||
|
||
// Navigation to previous slide
|
||
function prevSlide() {
|
||
stopCarousel()
|
||
currentSlide.value = (currentSlide.value - 1 + carouselImages.length) % carouselImages.length
|
||
startCarousel()
|
||
}
|
||
|
||
// Navigation to next slide
|
||
function nextSlide() {
|
||
stopCarousel()
|
||
currentSlide.value = (currentSlide.value + 1) % carouselImages.length
|
||
startCarousel()
|
||
}
|
||
|
||
// Navigation to specific slide
|
||
function goToSlide(index: number) {
|
||
stopCarousel()
|
||
currentSlide.value = index
|
||
startCarousel()
|
||
}
|
||
|
||
// Start carousel on mount
|
||
onMounted(() => {
|
||
startCarousel()
|
||
})
|
||
|
||
// Cleanup on unmount
|
||
onUnmounted(() => {
|
||
stopCarousel()
|
||
})
|
||
|
||
// 招生章程数据
|
||
const admissionRegulations = ref([
|
||
{ title: '2025年艺术类本科招生章程', link: '/regulations/art-2025' },
|
||
{ title: '2025年体育类本科招生章程', link: '/regulations/sports-2025' },
|
||
{ title: '2025年音乐类专业招生章程', link: '/regulations/music-2025' },
|
||
{ title: '2025年舞蹈类专业招生章程', link: '/regulations/dance-2025' },
|
||
{ title: '2025年美术类专业招生章程', link: '/regulations/art-2025' },
|
||
])
|
||
|
||
// 高考动态数据
|
||
const examNews = ref([
|
||
{ title: '2025年高考政策解读', link: '/news/policy-2025' },
|
||
{ title: '艺术类招生趋势分析', link: '/news/art-trends' },
|
||
{ title: '体育类专业录取规则', link: '/news/sports-rules' },
|
||
{ title: '新高考选科指导', link: '/news/new-gaokao' },
|
||
{ title: '志愿填报技巧分享', link: '/news/volunteer-tips' },
|
||
])
|
||
|
||
// 热门院校数据
|
||
const popularSchools = ref([
|
||
{
|
||
name: '中央美术学院',
|
||
logo: 'http://img1.youzy.cn/content/media/thumbs/p00026840.jpeg',
|
||
major: '美术学、设计学',
|
||
tag: '艺术类名校',
|
||
region: '省外本科', // 添加区域信息
|
||
},
|
||
{
|
||
name: '北京体育大学',
|
||
logo: 'http://img1.youzy.cn/content/media/thumbs/p00026840.jpeg',
|
||
major: '体育教育、运动训练',
|
||
tag: '体育类名校',
|
||
region: '省外本科', // 添加区域信息
|
||
},
|
||
{
|
||
name: '中国音乐学院',
|
||
logo: 'http://img1.youzy.cn/content/media/thumbs/p00026840.jpeg',
|
||
major: '音乐表演、音乐学',
|
||
tag: '音乐类名校',
|
||
region: '省外本科', // 添加区域信息
|
||
},
|
||
{
|
||
name: '上海戏剧学院',
|
||
logo: 'http://img1.youzy.cn/content/media/thumbs/p00026840.jpeg',
|
||
major: '表演、导演',
|
||
tag: '艺术类名校',
|
||
region: '省外本科', // 添加区域信息
|
||
},
|
||
{
|
||
name: '河南大学',
|
||
logo: 'http://img1.youzy.cn/content/media/thumbs/p00026840.jpeg',
|
||
major: '美术学、音乐学',
|
||
tag: '河南名校',
|
||
region: '河南本科', // 添加区域信息
|
||
},
|
||
{
|
||
name: '郑州大学',
|
||
logo: 'http://img1.youzy.cn/content/media/thumbs/p00026840.jpeg',
|
||
major: '体育教育、设计学',
|
||
tag: '河南名校',
|
||
region: '河南本科', // 添加区域信息
|
||
},
|
||
{
|
||
name: '河南师范大学',
|
||
logo: 'http://img1.youzy.cn/content/media/thumbs/p00026840.jpeg',
|
||
major: '音乐学、美术学',
|
||
tag: '河南名校',
|
||
region: '河南本科', // 添加区域信息
|
||
},
|
||
{
|
||
name: '河南职业技术学院',
|
||
logo: 'http://img1.youzy.cn/content/media/thumbs/p00026840.jpeg',
|
||
major: '艺术设计、音乐表演',
|
||
tag: '河南专科',
|
||
region: '河南专科', // 添加区域信息
|
||
},
|
||
])
|
||
|
||
// 区域过滤状态
|
||
const regionFilter = ref('全部') // 默认显示全部
|
||
|
||
// 区域选项
|
||
const regionOptions = [
|
||
{ label: '全部', value: '全部' },
|
||
{ label: '河南本科', value: '河南本科' },
|
||
{ label: '河南专科', value: '河南专科' },
|
||
{ label: '省外本科', value: '省外本科' },
|
||
{ label: '省外专科', value: '省外专科' },
|
||
]
|
||
|
||
// 根据区域过滤学校
|
||
const filteredSchools = computed(() => {
|
||
if (regionFilter.value === '全部') {
|
||
return popularSchools.value
|
||
}
|
||
return popularSchools.value.filter(school => school.region === regionFilter.value)
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="mx-auto max-w-7xl select-none px-4 py-8 lg:px-8 sm:px-6">
|
||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-10">
|
||
<!-- Left Carousel (70% width on lg) -->
|
||
<div class="lg:col-span-7">
|
||
<div class="relative overflow-hidden rounded-2xl bg-white shadow-xl">
|
||
<div class="relative aspect-video overflow-hidden">
|
||
<!-- Carousel images -->
|
||
<transition-group name="fade" tag="div">
|
||
<div
|
||
v-for="(image, index) in carouselImages"
|
||
v-show="index === currentSlide"
|
||
:key="image.id"
|
||
class="absolute inset-0"
|
||
>
|
||
<a :href="image.linkUrl" class="block h-full w-full">
|
||
<img
|
||
:src="image.imageUrl"
|
||
:alt="image.altText"
|
||
class="h-full w-full object-cover"
|
||
>
|
||
</a>
|
||
</div>
|
||
</transition-group>
|
||
</div>
|
||
|
||
<!-- Carousel navigation -->
|
||
<div class="absolute bottom-4 left-1/2 flex transform -translate-x-1/2 space-x-2">
|
||
<button
|
||
v-for="(image, index) in carouselImages"
|
||
:key="image.id"
|
||
class="h-3 w-3 rounded-full bg-dark-1 hover:bg-dark-3 focus:outline-none"
|
||
:class="index === currentSlide ? 'opacity-100' : 'opacity-50'"
|
||
@click="goToSlide(index)"
|
||
>
|
||
<span class="sr-only">Slide {{ index + 1 }}</span>
|
||
</button>
|
||
</div>
|
||
<!-- Previous/Next buttons -->
|
||
<button
|
||
class="absolute left-4 top-1/2 transform rounded-full bg-gray/20 p-2 text-gray-800 transition-all-300 -translate-y-1/2 hover:bg-gray focus:outline-none"
|
||
@click="prevSlide"
|
||
>
|
||
<span class="sr-only">Previous</span>
|
||
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||
</svg>
|
||
</button>
|
||
|
||
<button
|
||
class="absolute right-4 top-1/2 transform rounded-full bg-gray/20 p-2 text-gray-800 transition-all-300 -translate-y-1/2 hover:bg-gray focus:outline-none"
|
||
@click="nextSlide"
|
||
>
|
||
<span class="sr-only">Next</span>
|
||
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Responsive Menu with 8 Functional Buttons -->
|
||
<div class="grid grid-cols-2 mt-4 gap-4 lg:grid-cols-4 md:grid-cols-4 sm:grid-cols-3">
|
||
<a
|
||
v-for="(menu, index) in responseMenus"
|
||
:key="index"
|
||
:href="menu.url"
|
||
class="group relative flex flex-col transform animate-fade-in-up items-center justify-center border border-gray-100 rounded-xl bg-white p-4 text-gray-700 shadow-md transition-all duration-300 hover:border-blue-200 dark:text-light-700 group-hover:text-blue-800 hover:shadow-lg hover:-translate-y-1"
|
||
:style="{ 'animation-delay': menu.animationDelay }"
|
||
:class="{
|
||
'dark:bg-gray-900 dark:border-gray-800 dark:hover:border-gray-500': menu.darkMode,
|
||
}"
|
||
:aria-label="menu.label"
|
||
>
|
||
<div class="mb-2 h-12 w-12 flex items-center justify-center">
|
||
<svg class="h-6 w-6 text-blue-600 transition-colors group-hover:text-blue-800" :class="{ 'dark:text-light': menu.darkMode }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="menu.icon" />
|
||
</svg>
|
||
</div>
|
||
<span class="text-sm text-gray-700 font-medium group-hover:text-blue-800" :class="{ 'dark:text-light-700': menu.darkMode }"> {{ menu.label }} </span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Form (30% width on lg) -->
|
||
<div class="select-none lg:col-span-3">
|
||
<div class="rounded-2xl bg-white p-6 text-gray-700 shadow-xl dark:border-gray-700 dark:bg-gray-800 dark:text-white">
|
||
<!-- Show different content based on login status -->
|
||
<div v-if="!userStore.userInfo" class="h-full flex flex-col justify-between">
|
||
<div>
|
||
<h2 class="mb-2 text-xl font-bold text-gray-800 dark:text-white">
|
||
Hi, 欢迎来到艺体志愿宝
|
||
</h2>
|
||
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
|
||
登录后即可使用 AI 智能填报助手
|
||
</p>
|
||
|
||
<div class="space-y-4">
|
||
<div class="flex items-center gap-3 rounded-xl bg-blue-50 p-3 dark:bg-blue-900/20">
|
||
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600 dark:bg-blue-800 dark:text-blue-300">
|
||
<div class="i-carbon-chart-line-data h-6 w-6" />
|
||
</div>
|
||
<div>
|
||
<div class="text-sm font-bold text-gray-800 dark:text-gray-100">
|
||
精准测算
|
||
</div>
|
||
<div class="text-xs text-gray-500 dark:text-gray-400">
|
||
基于大数据的录取概率分析
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center gap-3 rounded-xl bg-purple-50 p-3 dark:bg-purple-900/20">
|
||
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-purple-100 text-purple-600 dark:bg-purple-800 dark:text-purple-300">
|
||
<div class="i-carbon-education h-6 w-6" />
|
||
</div>
|
||
<div>
|
||
<div class="text-sm font-bold text-gray-800 dark:text-gray-100">
|
||
院校推荐
|
||
</div>
|
||
<div class="text-xs text-gray-500 dark:text-gray-400">
|
||
个性化匹配你的理想大学
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center gap-3 rounded-xl bg-green-50 p-3 dark:bg-green-900/20">
|
||
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-green-100 text-green-600 dark:bg-green-800 dark:text-green-300">
|
||
<div class="i-carbon-report h-6 w-6" />
|
||
</div>
|
||
<div>
|
||
<div class="text-sm font-bold text-gray-800 dark:text-gray-100">
|
||
志愿诊断
|
||
</div>
|
||
<div class="text-xs text-gray-500 dark:text-gray-400">
|
||
科学评估志愿填报风险
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-8">
|
||
<button
|
||
class="w-full transform rounded-xl bg-gradient-to-r from-blue-600 to-blue-500 py-3.5 text-center text-white font-semibold shadow-lg transition-all duration-200 hover:scale-[1.02] hover:shadow-blue-500/30 active:scale-[0.98]"
|
||
@click="$router.push('/login')"
|
||
>
|
||
立即登录 / 注册
|
||
</button>
|
||
<p class="mt-3 text-center text-xs text-gray-400">
|
||
注册即代表同意
|
||
<router-link to="/agreement" class="text-blue-500 hover:text-blue-600 hover:underline">
|
||
《用户服务协议》
|
||
</router-link>
|
||
和
|
||
<router-link to="/privacy-policy" class="text-blue-500 hover:text-blue-600 hover:underline">
|
||
《隐私政策》
|
||
</router-link>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else>
|
||
<score-form />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 招生章程、高考动态和热门院校推荐部分 -->
|
||
<div class="content-section mt-12 select-none">
|
||
<div class="dual-column-layout mb-10">
|
||
<div class="left-column border-r-2 border-r-gray-800 border-dashed pr-4 dark:border-r-gray-400">
|
||
<h3 class="mb-4 text-xl text-gray-800 font-bold dark:text-white">
|
||
招生章程
|
||
</h3>
|
||
<ul class="article-list space-y-2">
|
||
<li v-for="(item, index) in admissionRegulations" :key="`reg-${index}`">
|
||
<a :href="item.link" :title="item.title" class="block rounded-lg px-3 py-2 text-gray-700 transition-colors duration-200 hover:bg-gray-100 dark:text-gray-300 hover:text-blue-600 dark:hover:bg-gray-700 dark:hover:text-blue-400">
|
||
<div class="flex items-center">
|
||
<svg class="mr-2 h-4 w-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||
</svg>
|
||
<span class="truncate">{{ item.title }}</span>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="right-column">
|
||
<h3 class="mb-4 text-xl text-gray-800 font-bold dark:text-white">
|
||
高考动态
|
||
</h3>
|
||
<ul class="article-list space-y-2">
|
||
<li v-for="(item, index) in examNews" :key="`news-${index}`">
|
||
<a :href="item.link" :title="item.title" class="block rounded-lg px-3 py-2 text-gray-700 transition-colors duration-200 hover:bg-gray-100 dark:text-gray-300 hover:text-blue-600 dark:hover:bg-gray-700 dark:hover:text-blue-400">
|
||
<div class="flex items-center">
|
||
<svg class="mr-2 h-4 w-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||
</svg>
|
||
<span class="truncate">{{ item.title }}</span>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="popular-schools">
|
||
<h3 class="mb-4 text-xl text-gray-800 font-bold dark:text-white">
|
||
热门院校推荐
|
||
</h3>
|
||
|
||
<!-- 区域过滤器 -->
|
||
<div class="region-filter mb-6">
|
||
<div class="flex flex-wrap gap-2" role="radiogroup" aria-label="选择院校区域">
|
||
<button
|
||
v-for="option in regionOptions"
|
||
:key="option.value"
|
||
class="region-filter-btn transform rounded-full px-4 py-2 text-sm font-medium transition-all duration-300 hover:scale-105 aria-checked:bg-blue-600 aria-checked:text-white aria-checked:font-semibold hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" :class="[
|
||
regionFilter === option.value
|
||
? 'bg-blue-600 text-white font-semibold shadow-md'
|
||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600',
|
||
]"
|
||
:aria-checked="regionFilter === option.value"
|
||
role="radio"
|
||
@click="regionFilter = option.value"
|
||
>
|
||
{{ option.label }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="school-grid grid grid-cols-1 gap-4 lg:grid-cols-3 md:grid-cols-2 xl:grid-cols-4">
|
||
<div v-for="(school, index) in filteredSchools" :key="`school-${index}`" class="border border-gray-200 rounded-xl bg-white p-4 transition-all duration-300 dark:border-gray-700 hover:border-blue-300 dark:bg-gray-800 hover:shadow-lg dark:hover:border-blue-500 dark:hover:shadow-xl">
|
||
<div class="flex">
|
||
<div class="school-logo mr-4 h-16 w-16 flex-shrink-0">
|
||
<img :src="school.logo" :alt="school.name" class="h-full w-full rounded-full object-contain">
|
||
</div>
|
||
<div class="school-info min-w-0 flex-1">
|
||
<div class="school-name mb-1 truncate text-gray-800 font-bold dark:text-white" :title="school.name">
|
||
{{ school.name }}
|
||
</div>
|
||
<div class="school-major mb-2 truncate text-sm text-gray-600 dark:text-gray-400" :title="school.major">
|
||
热门专业：{{ school.major }}
|
||
</div>
|
||
<div class="flex items-center justify-between">
|
||
<span class="school-tag max-w-[80px] truncate rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 dark:bg-gray-700 dark:text-gray-300" :title="school.tag">{{ school.tag }}</span>
|
||
<button class="view-btn rounded-lg bg-blue-600 px-3 py-1 text-sm text-white transition-colors duration-200 hover:bg-blue-700">
|
||
查看院校
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Login Modal (Z-index 调高，确保覆盖导航栏) -->
|
||
<div v-if="isLoginModalOpen" class="fixed inset-0 z-50 flex select-none items-center justify-center bg-black bg-opacity-50 px-4">
|
||
<div class="max-w-md w-full border rounded-lg bg-white p-6 shadow-xl transition-all dark:border-gray-700 dark:bg-gray-800">
|
||
<div class="mb-4 flex items-center justify-between">
|
||
<h3 class="text-xl text-gray-900 font-bold dark:text-white">
|
||
登录
|
||
</h3>
|
||
<button
|
||
class="text-3xl text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
|
||
@click="closeLoginModal"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
<!-- 使用组件并监听 confirm 事件 -->
|
||
<LoginForm @confirm="handleLoginConfirm" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.fade-enter-active,
|
||
.fade-leave-active {
|
||
transition: opacity 0.5s;
|
||
}
|
||
.fade-enter-from,
|
||
.fade-leave-to {
|
||
opacity: 0;
|
||
}
|
||
|
||
/* Staggered animation for menu items */
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.animate-fade-in-up {
|
||
animation: fadeInUp 0.6s ease-out forwards;
|
||
opacity: 0;
|
||
}
|
||
|
||
/* 招生章程、高考动态和热门院校推荐部分样式 */
|
||
.dual-column-layout {
|
||
display: flex;
|
||
gap: 30px;
|
||
}
|
||
|
||
.left-column,
|
||
.right-column {
|
||
flex: 1;
|
||
}
|
||
|
||
.article-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.article-list li {
|
||
margin-bottom: 15px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.popular-schools h3 {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.school-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||
gap: 20px;
|
||
}
|
||
|
||
.school-logo {
|
||
width: 60px;
|
||
height: 60px;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.school-logo img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.school-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.school-name {
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.school-major {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.school-tag {
|
||
font-size: 12px;
|
||
color: #888;
|
||
}
|
||
|
||
.view-btn {
|
||
padding: 4px 12px;
|
||
background: #1890ff;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.dual-column-layout {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.school-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* 区域过滤器样式 */
|
||
.region-filter-btn {
|
||
position: relative;
|
||
overflow: hidden;
|
||
border: none;
|
||
outline: none;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
min-width: 80px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.region-filter-btn::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||
transition: left 0.5s;
|
||
}
|
||
|
||
.region-filter-btn:hover::before {
|
||
left: 100%;
|
||
}
|
||
|
||
.region-filter-btn:focus-visible {
|
||
outline: 2px solid #2563eb;
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* 为活动状态添加更明显的视觉效果 */
|
||
.region-filter-btn.active {
|
||
background: linear-gradient(135deg, #3b82f6, #2563eb);
|
||
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
|
||
transform: translateY(-2px);
|
||
}
|
||
</style>
|
||
|
||
<route lang="yaml">
|
||
meta:
|
||
layout: home
|
||
</route>
|