965 lines
31 KiB
Vue
965 lines
31 KiB
Vue
<template>
|
||
<div class="home-page">
|
||
<!-- ==================== 顶部导航栏 ==================== -->
|
||
<header class="home-header">
|
||
<div class="header-inner">
|
||
<div class="header-logo">
|
||
<span class="logo-icon">☼</span>
|
||
<span class="logo-text">卫星通信与导航应用技术创新赛</span>
|
||
</div>
|
||
<nav class="header-nav">
|
||
<a href="#intro" class="nav-link">赛事介绍</a>
|
||
<a href="#groups" class="nav-link">竞赛组别</a>
|
||
<a href="#news" class="nav-link">新闻公告</a>
|
||
<a href="#process" class="nav-link">参赛流程</a>
|
||
</nav>
|
||
<div class="header-actions">
|
||
<template v-if="authStore.isLoggedIn">
|
||
<el-button v-if="authStore.isAdmin" type="primary" size="default" @click="$router.push('/admin')">
|
||
管理后台
|
||
</el-button>
|
||
<el-button v-else type="primary" size="default" @click="$router.push('/dashboard')">
|
||
选手工作台
|
||
</el-button>
|
||
<el-button type="default" size="default" v-guard="() => handleLogout()">
|
||
退出登录
|
||
</el-button>
|
||
</template>
|
||
<template v-else>
|
||
<el-button type="primary" size="default" @click="$router.push('/login')">
|
||
选手登录
|
||
</el-button>
|
||
<el-button type="warning" size="default" @click="$router.push('/activate')">
|
||
激活账号
|
||
</el-button>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ==================== 轮播图区域（全部由后台数据库驱动） ==================== -->
|
||
<section class="carousel-section" v-if="carouselList.length">
|
||
<el-carousel
|
||
:interval="5000"
|
||
:height="carouselHeight"
|
||
indicator-position="outside"
|
||
arrow="always"
|
||
trigger="click"
|
||
>
|
||
<el-carousel-item v-for="item in carouselList" :key="'slide-' + item.id">
|
||
<div
|
||
class="carousel-slide"
|
||
:class="{ 'carousel-slide--gradient': !item.imageUrl }"
|
||
:style="item.imageUrl ? { backgroundImage: `url(${item.imageUrl})` } : {}"
|
||
>
|
||
<div class="carousel-overlay"></div>
|
||
<div class="carousel-content">
|
||
<!-- 标题：用 v-html 以支持 <br> 等基础格式 -->
|
||
<h1 class="carousel-title" v-if="item.title" v-html="item.title"></h1>
|
||
<!-- 富文本正文（wangEditor 生成，v-html 渲染） -->
|
||
<div class="carousel-richtext" v-if="item.content" v-html="item.content"></div>
|
||
<!-- 可配置按钮：外链用 a[target=_blank]，站内路由用 router-link -->
|
||
<template v-if="item.buttonText">
|
||
<a
|
||
v-if="isExternalLink(item.buttonLink)"
|
||
:href="item.buttonLink"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="carousel-cta"
|
||
>{{ item.buttonText }}</a>
|
||
<router-link
|
||
v-else
|
||
:to="item.buttonLink || '/activate'"
|
||
class="carousel-cta"
|
||
>{{ item.buttonText }}</router-link>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</section>
|
||
|
||
<!-- ==================== 赛事介绍 ==================== -->
|
||
<section class="intro-section" id="intro">
|
||
<el-row justify="center">
|
||
<el-col :xs="24" :md="18" :lg="16">
|
||
<div class="intro-card">
|
||
<h2 class="section-title">
|
||
<span class="title-line"></span>
|
||
卫星通信与导航应用技术创新赛
|
||
</h2>
|
||
<el-divider />
|
||
<p class="intro-text">
|
||
卫星通信与导航应用技术竞赛为2026"一带一路"暨金砖国家技能发展与技术创新大赛全新增设核心赛项。
|
||
赛事聚焦卫星通信、导航定位领域前沿核心技术，紧扣产业发展实际需求与现代职业教育改革导向，
|
||
依托多层级、立体化竞赛考核体系，着力展示行业尖端技术成果，引领职业教育教学革新，
|
||
全面提升院校实训教学水平，锤炼参赛选手综合实操与创新能力，选拔培育卫星信息领域高素质技术技能人才。
|
||
</p>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</section>
|
||
|
||
<!-- ==================== 竞赛组别 ==================== -->
|
||
<section class="groups-section" id="groups">
|
||
<div class="section-header">
|
||
<h2 class="section-title"><span class="title-line"></span>竞赛组别</h2>
|
||
<p class="section-subtitle">选择适合您的赛道，展现您的技术实力</p>
|
||
</div>
|
||
<el-row justify="center">
|
||
<el-col :xs="24" :md="22" :lg="20">
|
||
<el-row :gutter="24" justify="center">
|
||
<el-col :xs="24" :sm="12" :md="6" v-for="grp in groups" :key="grp.key">
|
||
<el-card class="group-card" :class="`group-card--${grp.key}`" :body-style="{ padding: '0' }" shadow="hover">
|
||
<div class="group-card-inner">
|
||
<div class="group-card-header" :style="{ background: grp.color }">
|
||
<div class="group-icon"><span class="icon-placeholder">{{ grp.icon }}</span></div>
|
||
<h3 class="group-name">{{ grp.name }}</h3>
|
||
</div>
|
||
<div class="group-card-body">
|
||
<el-tag :color="grp.tagColor" class="group-tag" effect="dark">{{ grp.type }}</el-tag>
|
||
<p class="group-desc">{{ grp.desc }}</p>
|
||
<el-divider class="group-divider" />
|
||
<el-button class="group-link-btn" :style="{ color: grp.color, borderColor: grp.color }" plain round size="small" @click="$router.push('/login')">
|
||
立即报名
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
</el-row>
|
||
</section>
|
||
|
||
<!-- ==================== 新闻公告（带分组 Tab 筛选） ==================== -->
|
||
<section class="news-section" id="news">
|
||
<div class="section-header">
|
||
<h2 class="section-title"><span class="title-line"></span>新闻公告</h2>
|
||
<p class="section-subtitle">了解赛事最新动态与通知</p>
|
||
</div>
|
||
<el-row :gutter="20" justify="center">
|
||
<el-col :xs="24" :md="18" :lg="16">
|
||
<!-- 分组 Tab -->
|
||
<el-tabs v-model="activeNewsTab" @tab-change="onNewsTabChange" class="news-tabs">
|
||
<el-tab-pane
|
||
v-for="tab in newsTabs"
|
||
:key="tab.key"
|
||
:label="`${tab.label} (${tab.count})`"
|
||
:name="tab.key"
|
||
/>
|
||
</el-tabs>
|
||
|
||
<el-card shadow="never" class="news-card" v-loading="newsLoading">
|
||
<!-- 置顶新闻 -->
|
||
<div v-if="pinnedNews.length > 0" class="pinned-section">
|
||
<div class="pinned-header">
|
||
<el-icon color="#c9a84c"><Top /></el-icon>
|
||
<span class="pinned-title">置顶公告</span>
|
||
</div>
|
||
<div
|
||
v-for="item in pinnedNews"
|
||
:key="'pinned-' + item.id"
|
||
class="news-item pinned-item"
|
||
@click="viewNewsDetail(item.id)"
|
||
>
|
||
<el-tag type="warning" size="small" effect="dark">置顶</el-tag>
|
||
<span class="news-item-title text-ellipsis">{{ item.title }}</span>
|
||
<template v-if="item.tags">
|
||
<el-tag v-for="tag in (item.tags || '').split(',').filter(Boolean)" :key="tag" size="small" class="news-tag" round>{{ tag.trim() }}</el-tag>
|
||
</template>
|
||
<span class="news-item-time">{{ formatDate(item.publish_time) }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 普通新闻列表 -->
|
||
<div v-if="normalNews.length > 0" class="normal-section">
|
||
<div
|
||
v-for="item in normalNews"
|
||
:key="item.id"
|
||
class="news-item"
|
||
@click="viewNewsDetail(item.id)"
|
||
>
|
||
<span class="news-dot"></span>
|
||
<span class="news-item-title text-ellipsis">{{ item.title }}</span>
|
||
<template v-if="item.tags">
|
||
<el-tag v-for="tag in (item.tags || '').split(',').filter(Boolean)" :key="tag" size="small" class="news-tag" round>{{ tag.trim() }}</el-tag>
|
||
</template>
|
||
<span class="news-item-time">{{ formatDate(item.publish_time) }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 空状态 -->
|
||
<el-empty v-if="!newsLoading && pinnedNews.length === 0 && normalNews.length === 0" description="暂无新闻公告" />
|
||
|
||
<!-- 分页 -->
|
||
<div class="news-pagination" v-if="newsTotal > newsPagination.pageSize">
|
||
<el-pagination
|
||
v-model:current-page="newsPagination.page"
|
||
:page-size="newsPagination.pageSize"
|
||
:total="newsTotal"
|
||
layout="prev, pager, next"
|
||
size="small"
|
||
@current-change="onNewsPageChange"
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</section>
|
||
|
||
<!-- ==================== 参赛流程 ==================== -->
|
||
<section class="timeline-section" id="process">
|
||
<div class="section-header">
|
||
<h2 class="section-title"><span class="title-line"></span>参赛流程</h2>
|
||
<p class="section-subtitle">简单四步，开启您的竞赛之旅</p>
|
||
</div>
|
||
<el-row justify="center">
|
||
<el-col :xs="24" :md="18" :lg="16">
|
||
<div class="process-timeline">
|
||
<template v-for="(step, index) in processSteps" :key="index">
|
||
<div class="process-step">
|
||
<div class="process-step-badge">
|
||
<span class="step-number">{{ index + 1 }}</span>
|
||
</div>
|
||
<div class="process-step-content">
|
||
<h4 class="step-title">{{ step }}</h4>
|
||
</div>
|
||
</div>
|
||
<div class="process-step-arrow" v-if="index < processSteps.length - 1">
|
||
<span class="arrow-icon">➔</span>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</section>
|
||
|
||
<!-- ==================== 资料下载（已移至工作台） ==================== -->
|
||
<!--
|
||
<section class="materials-section" id="materials">
|
||
<div class="section-header">
|
||
<h2 class="section-title"><span class="title-line"></span>资料下载</h2>
|
||
<p class="section-subtitle">关于中职组/高职组/本科组/教师组比赛相关的说明资料，点击按钮进入下载界面</p>
|
||
</div>
|
||
<el-row justify="center">
|
||
<el-col :xs="24" :md="18" :lg="16">
|
||
<div class="materials-card">
|
||
<el-alert
|
||
title="赛事资料请通过百度网盘下载"
|
||
type="info"
|
||
:closable="false"
|
||
show-icon
|
||
class="materials-alert"
|
||
>
|
||
<template #default>
|
||
<p class="materials-link">百度网盘链接：<el-link type="primary" href="https://pan.baidu.com" target="_blank">https://pan.baidu.com/s/xxxxxx</el-link>（提取码：2026）</p>
|
||
<p class="materials-hint">请使用微信扫描下方二维码获取资料，或登录后在工作台查看备赛资料</p>
|
||
</template>
|
||
</el-alert>
|
||
<div class="materials-qr">
|
||
<div class="qr-placeholder">
|
||
<span class="qr-icon">□</span>
|
||
<span class="qr-text">二维码</span>
|
||
</div>
|
||
<p class="qr-hint">微信扫码获取资料</p>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</section>
|
||
-->
|
||
|
||
<!-- ==================== 页脚 ==================== -->
|
||
<footer class="footer-section">
|
||
<div class="footer-content">
|
||
<h3 class="footer-contact-title">联系我们</h3>
|
||
<p class="footer-contact">赛事咨询：吴老师 13810099338</p>
|
||
<p class="footer-contact">大赛QQ群：1103585733</p>
|
||
<p class="footer-text">© {{ currentYear }} 卫星通信与导航应用技术创新赛组委会 版权所有</p>
|
||
<p class="footer-subtext">技术支持 | 竞赛咨询请联系组委会官方渠道</p>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
/**
|
||
* Home.vue - 竞赛网站首页（公开访问）
|
||
*
|
||
* 功能：
|
||
* 1. 顶部导航栏（登录/激活按钮）
|
||
* 2. 固定两页轮播 + 管理员自定义轮播
|
||
* 3. 赛事介绍
|
||
* 4. 竞赛组别卡片（4 个组别）
|
||
* 5. 新闻公告（Tab 分组筛选）
|
||
* 6. 参赛流程时间线
|
||
* 7. 资料下载（百度网盘 + 二维码）
|
||
* 8. 页脚
|
||
*/
|
||
import { ref, computed, onMounted } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { ElMessage } from 'element-plus'
|
||
import { Top } from '@element-plus/icons-vue'
|
||
import { useAuthStore } from '@/stores/auth'
|
||
import * as carouselApi from '@/api/carousel'
|
||
import * as newsApi from '@/api/news'
|
||
import { normalizeImageUrl } from '@/utils/upload'
|
||
|
||
const router = useRouter()
|
||
const authStore = useAuthStore()
|
||
|
||
// ==================== 状态 ====================
|
||
|
||
// 轮播图（管理员自定义）
|
||
const carouselList = ref([])
|
||
const carouselHeight = ref('500px')
|
||
|
||
// 新闻
|
||
const newsList = ref([])
|
||
const newsLoading = ref(false)
|
||
const activeNewsTab = ref('all')
|
||
const newsPagination = ref({ page: 1, pageSize: 10 })
|
||
const newsTotal = ref(0)
|
||
|
||
const newsTabs = ref([
|
||
{ key: 'all', label: '全部', count: 0 },
|
||
{ key: 'zhongzhi', label: '中职组', count: 0 },
|
||
{ key: 'gaozhi', label: '高职组', count: 0 },
|
||
{ key: 'benke', label: '本科组', count: 0 },
|
||
{ key: 'jiaoshi', label: '教师组', count: 0 },
|
||
])
|
||
|
||
// 竞赛组别
|
||
const groups = [
|
||
{ key: 'zhongzhi', name: '中职组', icon: '中职', color: '#3b82f6', tagColor: '#3b82f6', type: '在线答题', desc: '重点考察卫星通信与导航领域的基础核心知识和高精度接收机的实操能力。' },
|
||
{ key: 'gaozhi', name: '高职组', icon: '高职', color: '#10b981', tagColor: '#10b981', type: '在线答题', desc: '重点考察卫星通信与导航领域的基础核心知识和卫星通信设备的实操能力。' },
|
||
{ key: 'benke', name: '本科组', icon: '本科', color: '#f59e0b', tagColor: '#f59e0b', type: '提交作品', desc: '重点考察卫星通信与导航领域的基础核心知识和卫星通信与导航的应用创新能力。' },
|
||
{ key: 'jiaoshi', name: '教师组', icon: '教师', color: '#ef4444', tagColor: '#ef4444', type: '提交作品', desc: '重点考察卫星通信与导航技术相关课程的教学方案设计能力和现场表达展现能力。' },
|
||
]
|
||
|
||
const processSteps = ['账号激活', '确认考试信息', '参加考试', '成绩获取']
|
||
const currentYear = new Date().getFullYear()
|
||
|
||
// ==================== 计算属性 ====================
|
||
|
||
const pinnedNews = computed(() => newsList.value.filter(n => n.pinned))
|
||
const normalNews = computed(() => newsList.value.filter(n => !n.pinned))
|
||
|
||
// ==================== 方法 ====================
|
||
|
||
function formatDate(dateStr) {
|
||
if (!dateStr) return ''
|
||
const d = new Date(dateStr)
|
||
if (isNaN(d.getTime())) return dateStr
|
||
const y = d.getFullYear()
|
||
const m = String(d.getMonth() + 1).padStart(2, '0')
|
||
const day = String(d.getDate()).padStart(2, '0')
|
||
return `${y}-${m}-${day}`
|
||
}
|
||
|
||
function viewNewsDetail(id) {
|
||
router.push(`/news/${id}`)
|
||
}
|
||
|
||
function onNewsTabChange() {
|
||
newsPagination.value.page = 1
|
||
fetchNews()
|
||
}
|
||
|
||
function onNewsPageChange() {
|
||
fetchNews()
|
||
}
|
||
|
||
/**
|
||
* 判断链接是否为外部链接（http/https/协议相对 //）
|
||
* @param {string} link
|
||
* @returns {boolean}
|
||
*/
|
||
function isExternalLink(link) {
|
||
if (!link) return false
|
||
return /^(https?:)?\/\//i.test(link)
|
||
}
|
||
|
||
async function fetchCarousel() {
|
||
try {
|
||
const data = await carouselApi.getCarouselList()
|
||
if (Array.isArray(data)) {
|
||
carouselList.value = data
|
||
.filter(item => item.enabled !== false)
|
||
.map(item => ({
|
||
id: item.id,
|
||
imageUrl: item.image_url ? normalizeImageUrl(item.image_url) : '',
|
||
title: item.title || '',
|
||
content: item.content || '',
|
||
buttonText: item.button_text || '',
|
||
buttonLink: item.button_link || '',
|
||
sortOrder: item.sort_order || 0,
|
||
}))
|
||
.sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))
|
||
}
|
||
updateCarouselHeight()
|
||
window.addEventListener('resize', updateCarouselHeight)
|
||
} catch (err) {
|
||
console.warn('获取轮播图失败', err)
|
||
}
|
||
}
|
||
|
||
function updateCarouselHeight() {
|
||
carouselHeight.value = window.innerWidth < 768 ? '280px' : '500px'
|
||
}
|
||
|
||
async function fetchNews() {
|
||
newsLoading.value = true
|
||
try {
|
||
const params = {
|
||
page: newsPagination.value.page,
|
||
pageSize: newsPagination.value.pageSize,
|
||
}
|
||
if (activeNewsTab.value !== 'all') {
|
||
params.group = activeNewsTab.value
|
||
}
|
||
const data = await newsApi.getNewsList(params)
|
||
if (data && data.list) {
|
||
newsList.value = data.list
|
||
newsTotal.value = data.total || 0
|
||
} else if (Array.isArray(data)) {
|
||
newsList.value = data
|
||
newsTotal.value = data.length
|
||
} else {
|
||
newsList.value = []
|
||
newsTotal.value = 0
|
||
}
|
||
const counts = await newsApi.getNewsCounts()
|
||
if (counts) {
|
||
newsTabs.value.forEach(tab => {
|
||
tab.count = counts[tab.key] || 0
|
||
})
|
||
}
|
||
} catch (err) {
|
||
console.warn('获取新闻列表失败', err)
|
||
newsList.value = []
|
||
newsTotal.value = 0
|
||
} finally {
|
||
newsLoading.value = false
|
||
}
|
||
}
|
||
|
||
async function handleLogout() {
|
||
await authStore.logout()
|
||
}
|
||
|
||
onMounted(() => {
|
||
fetchCarousel()
|
||
fetchNews()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* ==================== CSS 变量 ==================== */
|
||
.home-page {
|
||
--primary: #1a3a5c;
|
||
--primary-light: #2a5a8c;
|
||
--primary-dark: #0f2640;
|
||
--gold: #c9a84c;
|
||
--gold-light: #e0c97a;
|
||
--bg-light: #f5f6f8;
|
||
--bg-white: #ffffff;
|
||
--text-primary: #1f2937;
|
||
--text-secondary: #6b7280;
|
||
--border-light: #e5e7eb;
|
||
min-height: 100vh;
|
||
background: var(--bg-light);
|
||
}
|
||
|
||
/* ==================== 顶部导航栏 ==================== */
|
||
.home-header {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 1000;
|
||
background: rgba(26, 58, 92, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
.header-inner {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 20px;
|
||
height: 60px;
|
||
}
|
||
.header-logo {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.logo-icon {
|
||
font-size: 24px;
|
||
color: var(--gold);
|
||
}
|
||
.logo-text {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
letter-spacing: 1px;
|
||
}
|
||
.header-nav {
|
||
display: flex;
|
||
gap: 28px;
|
||
}
|
||
.nav-link {
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-size: 14px;
|
||
transition: color 0.3s;
|
||
cursor: pointer;
|
||
}
|
||
.nav-link:hover {
|
||
color: var(--gold);
|
||
}
|
||
.header-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.header-nav { display: none; }
|
||
.logo-text { font-size: 13px; }
|
||
.header-inner { padding: 0 12px; }
|
||
}
|
||
|
||
/* ==================== 轮播图 ==================== */
|
||
.carousel-section {
|
||
position: relative;
|
||
background: var(--primary-dark);
|
||
}
|
||
.carousel-section .el-carousel__arrow {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.18);
|
||
color: #fff;
|
||
font-size: 20px;
|
||
transition: all 0.3s ease;
|
||
border: none;
|
||
}
|
||
.carousel-section .el-carousel__arrow:hover {
|
||
/* 箭头图标为白色字体，hover 不可用浅/白色背景，否则图标隐形 */
|
||
background: rgba(26, 58, 92, 0.6);
|
||
}
|
||
.carousel-section .el-carousel__arrow--left {
|
||
left: 24px;
|
||
}
|
||
.carousel-section .el-carousel__arrow--right {
|
||
right: 24px;
|
||
}
|
||
.carousel-slide {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
/* 无底图时的默认渐变背景（还原原固定页深蓝渐变外观） */
|
||
.carousel-slide--gradient {
|
||
background: linear-gradient(135deg, #0f2640 0%, #1a3a5c 30%, #2a5a8c 60%, #0f2640 100%);
|
||
}
|
||
.carousel-overlay {
|
||
position: absolute;
|
||
top: 0; left: 0;
|
||
width: 100%; height: 100%;
|
||
background: radial-gradient(ellipse at 30% 50%, rgba(201, 168, 76, 0.12) 0%, transparent 60%),
|
||
radial-gradient(ellipse at 70% 50%, rgba(201, 168, 76, 0.06) 0%, transparent 60%);
|
||
pointer-events: none;
|
||
}
|
||
.carousel-content {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 2;
|
||
text-align: center;
|
||
color: #fff;
|
||
max-width: 800px;
|
||
width: 100%;
|
||
padding: 0 40px;
|
||
}
|
||
.carousel-title {
|
||
font-size: 40px;
|
||
font-weight: 800;
|
||
margin-bottom: 18px;
|
||
letter-spacing: 2px;
|
||
line-height: 1.3;
|
||
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
|
||
animation: carouselFadeInUp 0.7s ease;
|
||
}
|
||
.carousel-desc {
|
||
font-size: 18px;
|
||
color: rgba(255, 255, 255, 0.88);
|
||
line-height: 1.8;
|
||
margin-bottom: 32px;
|
||
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
|
||
animation: carouselFadeInUp 0.7s ease 0.15s both;
|
||
}
|
||
/* 富文本正文容器（wangEditor 生成的 HTML 经 v-html 渲染）
|
||
scoped CSS 不作用于 v-html 子节点，故用 :deep() 兜底常见标签的可读性 */
|
||
.carousel-richtext {
|
||
font-size: 18px;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
line-height: 1.8;
|
||
margin-bottom: 32px;
|
||
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
|
||
animation: carouselFadeInUp 0.7s ease 0.15s both;
|
||
}
|
||
.carousel-richtext :deep(p),
|
||
.carousel-richtext :deep(span),
|
||
.carousel-richtext :deep(li),
|
||
.carousel-richtext :deep(div) {
|
||
color: inherit;
|
||
line-height: 1.8;
|
||
}
|
||
.carousel-richtext :deep(a) {
|
||
color: #e0c97a;
|
||
text-decoration: underline;
|
||
}
|
||
.carousel-richtext :deep(img) {
|
||
max-width: 100%;
|
||
border-radius: 8px;
|
||
}
|
||
.carousel-cta {
|
||
display: inline-block;
|
||
padding: 14px 44px;
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
letter-spacing: 2px;
|
||
color: #1a3a5c;
|
||
background: linear-gradient(135deg, #c9a84c, #e0c97a);
|
||
border: none;
|
||
border-radius: 50px;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
box-shadow: 0 4px 20px rgba(201, 168, 76, 0.4);
|
||
transition: all 0.3s ease;
|
||
animation: carouselFadeInUp 0.7s ease 0.3s both;
|
||
}
|
||
.carousel-cta:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 30px rgba(201, 168, 76, 0.5);
|
||
color: #1a3a5c;
|
||
}
|
||
|
||
/* 轮播页二：赛项内容卡片 */
|
||
.carousel-items {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 24px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 36px;
|
||
animation: carouselFadeInUp 0.7s ease 0.15s both;
|
||
}
|
||
.carousel-item-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 20px 24px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||
border-radius: 12px;
|
||
min-width: 140px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.carousel-item-card:hover {
|
||
background: rgba(255, 255, 255, 0.18);
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 8px 24px rgba(201, 168, 76, 0.2);
|
||
}
|
||
.carousel-item-card .item-icon {
|
||
font-size: 32px;
|
||
line-height: 1;
|
||
}
|
||
.carousel-item-card span {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
@keyframes carouselFadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(24px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
@media (max-width: 768px) {
|
||
.carousel-title {
|
||
font-size: 26px;
|
||
letter-spacing: 1px;
|
||
}
|
||
.carousel-desc {
|
||
font-size: 15px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.carousel-cta {
|
||
font-size: 15px;
|
||
padding: 12px 32px;
|
||
}
|
||
.carousel-section .el-carousel__arrow {
|
||
width: 38px;
|
||
height: 38px;
|
||
}
|
||
.carousel-section .el-carousel__arrow--left {
|
||
left: 12px;
|
||
}
|
||
.carousel-section .el-carousel__arrow--right {
|
||
right: 12px;
|
||
}
|
||
.carousel-items {
|
||
gap: 12px;
|
||
}
|
||
.carousel-item-card {
|
||
min-width: 120px;
|
||
padding: 14px 16px;
|
||
}
|
||
.carousel-item-card .item-icon {
|
||
font-size: 26px;
|
||
}
|
||
.carousel-item-card span {
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
/* ==================== Shared Sections ==================== */
|
||
.section-header {
|
||
text-align: center;
|
||
margin-bottom: 44px;
|
||
}
|
||
.section-title {
|
||
font-size: 30px;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin-bottom: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
}
|
||
.title-line {
|
||
display: inline-block;
|
||
width: 4px;
|
||
height: 28px;
|
||
background: var(--gold);
|
||
border-radius: 2px;
|
||
}
|
||
.section-subtitle {
|
||
font-size: 15px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* ==================== Intro ==================== */
|
||
.intro-section {
|
||
padding: 72px 20px 56px;
|
||
background: var(--bg-white);
|
||
}
|
||
.intro-card { text-align: center; padding: 20px; }
|
||
.intro-text { font-size: 15px; color: var(--text-secondary); line-height: 1.9; margin-bottom: 16px; text-align: left; text-indent: 2em; }
|
||
|
||
/* ==================== Groups ==================== */
|
||
.groups-section {
|
||
padding: 72px 20px;
|
||
background: var(--bg-light);
|
||
}
|
||
.group-card { border-radius: 12px; overflow: hidden; border: 1px solid var(--border-light); margin-bottom: 24px; transition: transform 0.3s; }
|
||
.group-card:hover { transform: translateY(-6px); }
|
||
.group-card-inner { display: flex; flex-direction: column; height: 100%; }
|
||
.group-card-header { padding: 28px 20px 20px; text-align: center; color: #fff; }
|
||
.group-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
|
||
.icon-placeholder { font-size: 15px; font-weight: 700; letter-spacing: 2px; white-space: nowrap; }
|
||
.group-name { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: 2px; }
|
||
.group-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--bg-white); }
|
||
.group-tag { margin-bottom: 12px; border: none; }
|
||
.group-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.8; margin: 0; flex: 1; }
|
||
.group-divider { margin: 16px 0; }
|
||
.group-link-btn { border-width: 1.5px; }
|
||
|
||
/* ==================== News ==================== */
|
||
.news-section {
|
||
padding: 72px 20px;
|
||
background: var(--bg-white);
|
||
}
|
||
.news-tabs .el-tabs__nav-wrap::after { height: 1px; }
|
||
.news-tabs .el-tabs__item { font-size: 15px; }
|
||
.news-card { border-radius: 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); }
|
||
.pinned-section { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px dashed var(--border-light); }
|
||
.pinned-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
|
||
.pinned-title { font-size: 14px; font-weight: 600; color: var(--gold); }
|
||
.news-item { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border-light); cursor: pointer; transition: all 0.2s; }
|
||
.news-item:hover { background: #fafbfc; margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 8px; }
|
||
.news-item:last-child { border-bottom: none; }
|
||
.news-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary-light); flex-shrink: 0; }
|
||
.news-item-title { font-size: 15px; color: var(--text-primary); flex: 1; min-width: 0; }
|
||
.text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.news-tag { margin-left: 6px; font-size: 11px; }
|
||
.news-item-time { font-size: 13px; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; }
|
||
.news-pagination { margin-top: 20px; display: flex; justify-content: center; }
|
||
|
||
/* ==================== Timeline ==================== */
|
||
.timeline-section {
|
||
padding: 72px 20px;
|
||
background: var(--bg-light);
|
||
}
|
||
.process-timeline {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
gap: 0;
|
||
flex-wrap: wrap;
|
||
}
|
||
.process-step {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
min-width: 140px;
|
||
max-width: 180px;
|
||
position: relative;
|
||
}
|
||
.process-step-badge {
|
||
width: 64px;
|
||
height: 64px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 16px;
|
||
box-shadow: 0 4px 16px rgba(26, 58, 92, 0.25);
|
||
}
|
||
.step-number {
|
||
font-size: 24px;
|
||
font-weight: 800;
|
||
color: #fff;
|
||
}
|
||
.process-step-content {
|
||
text-align: center;
|
||
}
|
||
.step-title {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin: 0;
|
||
}
|
||
.process-step-arrow {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
flex: 0 0 auto;
|
||
/* 垂直对齐流程点徽章中心：徽章高 64，中心在 32；箭头图标约 20 高，半高 10 → 32-10=22 */
|
||
margin: 22px 14px 0;
|
||
z-index: 1;
|
||
}
|
||
.arrow-icon {
|
||
font-size: 20px;
|
||
color: var(--primary-light);
|
||
}
|
||
|
||
/* ==================== Materials ==================== */
|
||
.materials-section {
|
||
padding: 72px 20px;
|
||
background: var(--bg-white);
|
||
}
|
||
.materials-card {
|
||
background: var(--bg-light);
|
||
border-radius: 12px;
|
||
padding: 32px;
|
||
text-align: center;
|
||
}
|
||
.materials-alert {
|
||
margin-bottom: 24px;
|
||
text-align: left;
|
||
}
|
||
.materials-link {
|
||
margin: 0 0 8px;
|
||
font-size: 14px;
|
||
}
|
||
.materials-hint {
|
||
margin: 0;
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
}
|
||
.materials-qr {
|
||
margin-top: 8px;
|
||
}
|
||
.qr-placeholder {
|
||
width: 140px;
|
||
height: 140px;
|
||
border: 2px dashed var(--border-light);
|
||
border-radius: 8px;
|
||
margin: 0 auto 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #fff;
|
||
}
|
||
.qr-icon {
|
||
font-size: 36px;
|
||
color: var(--text-secondary);
|
||
}
|
||
.qr-text {
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
margin-top: 4px;
|
||
}
|
||
.qr-hint {
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* ==================== Footer ==================== */
|
||
.footer-section {
|
||
background: var(--primary-dark);
|
||
color: rgba(255, 255, 255, 0.7);
|
||
padding: 48px 20px 32px;
|
||
text-align: center;
|
||
}
|
||
.footer-content {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
.footer-contact-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
margin-bottom: 12px;
|
||
}
|
||
.footer-contact {
|
||
font-size: 14px;
|
||
margin: 6px 0;
|
||
}
|
||
.footer-text {
|
||
font-size: 13px;
|
||
margin-top: 24px;
|
||
color: rgba(255, 255, 255, 0.5);
|
||
}
|
||
.footer-subtext {
|
||
font-size: 12px;
|
||
color: rgba(255, 255, 255, 0.35);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* ==================== Responsive ==================== */
|
||
@media (max-width: 768px) {
|
||
.section-title { font-size: 24px; }
|
||
.intro-section, .groups-section, .news-section, .timeline-section { padding: 48px 16px; }
|
||
.process-step-arrow { display: none; }
|
||
.process-timeline { flex-direction: column; gap: 32px; }
|
||
.process-step { flex-direction: row; gap: 16px; min-width: auto; width: 100%; max-width: 300px; }
|
||
.process-step-badge { margin-bottom: 0; flex-shrink: 0; }
|
||
.process-step-content { text-align: left; }
|
||
}
|
||
</style> |