756 lines
22 KiB
Vue
756 lines
22 KiB
Vue
<template>
|
||
<div class="home-page">
|
||
<!-- Banner 轮播区 -->
|
||
<section class="banner-section relative overflow-hidden">
|
||
<div class="banner-bg"></div>
|
||
<div class="mx-auto max-w-screen-xl px-4 py-6 relative z-10">
|
||
<a-row :gutter="24">
|
||
<!-- 左侧快捷入口 -->
|
||
<a-col :sm="6" :xs="24">
|
||
<div class="quick-nav bg-white/95 backdrop-blur rounded-lg shadow-lg p-4">
|
||
<div class="quick-nav-title">
|
||
<span class="icon">📋</span>
|
||
<span>政策要闻</span>
|
||
</div>
|
||
<ul class="quick-nav-list">
|
||
<li><NuxtLink to="/news?type=central">党中央国务院信息</NuxtLink></li>
|
||
<li><NuxtLink to="/news?type=region">自治区党委政府</NuxtLink></li>
|
||
<li><NuxtLink to="/news?type=department">其他厅委办信息</NuxtLink></li>
|
||
<li><NuxtLink to="/news?type=latest">最新发布</NuxtLink></li>
|
||
</ul>
|
||
</div>
|
||
</a-col>
|
||
|
||
<!-- 中间轮播 -->
|
||
<a-col :sm="18" :xs="24">
|
||
<div class="carousel-wrapper">
|
||
<a-carousel :dots="true" autoplay class="main-carousel">
|
||
<div v-for="(slide, index) in bannerSlides" :key="index" class="carousel-slide">
|
||
<img :alt="slide.title" :src="slide.image" class="carousel-image" />
|
||
<div class="carousel-overlay">
|
||
<div class="carousel-content">
|
||
<span class="carousel-tag">{{ slide.tag }}</span>
|
||
<h3 class="carousel-title">{{ slide.title }}</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-carousel>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 单位企业广告区 -->
|
||
<section class="ad-section">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="ad-banner bg-gradient-to-r from-blue-600 to-blue-800 rounded-lg p-4 flex items-center justify-between">
|
||
<div class="flex items-center gap-4">
|
||
<span class="text-3xl">🏢</span>
|
||
<div>
|
||
<div class="text-white font-semibold">单位企业展示</div>
|
||
<div class="text-blue-200 text-sm">为优秀单位企业提供展示平台</div>
|
||
</div>
|
||
</div>
|
||
<a-button ghost size="large" type="primary">了解详情</a-button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 决策咨询板块 -->
|
||
<section class="section">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<SectionHeader icon="📊" more-link="/consultation" title="决策咨询" />
|
||
|
||
<a-row :gutter="[24, 24]">
|
||
<!-- 左侧：市县决策、行业资讯 -->
|
||
<a-col :lg="12" :xs="24">
|
||
<div class="content-card">
|
||
<div class="card-header">
|
||
<span class="card-tag tag-orange">市县决策</span>
|
||
</div>
|
||
<div class="article-list">
|
||
<ArticleItem
|
||
v-for="item in cityArticles"
|
||
:key="item.id"
|
||
:article="item"
|
||
:show-image="true"
|
||
/>
|
||
</div>
|
||
<div class="mt-4">
|
||
<div class="card-header">
|
||
<span class="card-tag tag-green">行业资讯</span>
|
||
</div>
|
||
<ArticleItem
|
||
v-for="item in industryArticles"
|
||
:key="item.id"
|
||
:article="item"
|
||
:show-image="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
|
||
<!-- 右侧：前沿观察、企业动态 -->
|
||
<a-col :lg="12" :xs="24">
|
||
<div class="content-card">
|
||
<div class="card-header">
|
||
<span class="card-tag tag-blue">前沿观察</span>
|
||
</div>
|
||
<div class="article-list">
|
||
<ArticleItem
|
||
v-for="item in frontierArticles"
|
||
:key="item.id"
|
||
:article="item"
|
||
:show-image="true"
|
||
/>
|
||
</div>
|
||
<div class="mt-4">
|
||
<div class="card-header">
|
||
<span class="card-tag tag-purple">企业动态</span>
|
||
</div>
|
||
<ArticleItem
|
||
v-for="item in enterpriseArticles"
|
||
:key="item.id"
|
||
:article="item"
|
||
:show-image="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 广告位 -->
|
||
<section class="ad-section">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="ad-banner bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg p-6 text-center">
|
||
<h3 class="text-white text-xl font-semibold mb-2">战略合作伙伴招募中</h3>
|
||
<p class="text-cyan-100 mb-4">携手共创决策咨询新篇章</p>
|
||
<a-button size="large" type="primary">立即咨询</a-button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 决策参考板块 -->
|
||
<section class="section bg-gray-50">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<SectionHeader icon="📚" more-link="/reference" title="决策参考" />
|
||
|
||
<a-row :gutter="[24, 24]">
|
||
<!-- 左侧：政策原文、深度解读 -->
|
||
<a-col :lg="12" :xs="24">
|
||
<div class="content-card">
|
||
<div class="card-header">
|
||
<span class="card-tag tag-red">政策原文</span>
|
||
</div>
|
||
<div class="article-list">
|
||
<ArticleItem
|
||
v-for="item in policyArticles"
|
||
:key="item.id"
|
||
:article="item"
|
||
:show-image="true"
|
||
/>
|
||
</div>
|
||
<div class="mt-4">
|
||
<div class="card-header">
|
||
<span class="card-tag tag-orange">深度解读</span>
|
||
</div>
|
||
<ArticleItem
|
||
v-for="item in analysisArticles"
|
||
:key="item.id"
|
||
:article="item"
|
||
:show-image="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
|
||
<!-- 右侧：研究成果、专题研究 -->
|
||
<a-col :lg="12" :xs="24">
|
||
<div class="content-card">
|
||
<div class="card-header">
|
||
<span class="card-tag tag-blue">研究成果</span>
|
||
</div>
|
||
<div class="article-list">
|
||
<ArticleItem
|
||
v-for="item in researchArticles"
|
||
:key="item.id"
|
||
:article="item"
|
||
:show-image="true"
|
||
/>
|
||
</div>
|
||
<div class="mt-4">
|
||
<div class="card-header">
|
||
<span class="card-tag tag-green">专题研究</span>
|
||
</div>
|
||
<ArticleItem
|
||
v-for="item in specialArticles"
|
||
:key="item.id"
|
||
:article="item"
|
||
:show-image="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 专家资讯板块 -->
|
||
<section class="section">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<SectionHeader icon="👨🏫" more-link="/expert" title="专家资讯" />
|
||
|
||
<a-row :gutter="[24, 24]">
|
||
<!-- 左侧：专家视点 -->
|
||
<a-col :lg="12" :xs="24">
|
||
<div class="content-card">
|
||
<div class="card-header">
|
||
<span class="card-tag tag-blue">专家视点</span>
|
||
<NuxtLink class="more-link" to="/expert?type=view">更多 ›</NuxtLink>
|
||
</div>
|
||
<div class="article-list">
|
||
<ArticleItem
|
||
v-for="item in expertViewArticles"
|
||
:key="item.id"
|
||
:article="item"
|
||
:show-image="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
|
||
<!-- 右侧：专家动态 + 申请按钮 -->
|
||
<a-col :lg="12" :xs="24">
|
||
<div class="content-card">
|
||
<div class="card-header">
|
||
<span class="card-tag tag-green">专家动态</span>
|
||
<NuxtLink class="more-link" to="/expert?type=dynamic">更多 ›</NuxtLink>
|
||
</div>
|
||
<div class="article-list">
|
||
<ArticleItem
|
||
v-for="item in expertDynamicArticles"
|
||
:key="item.id"
|
||
:article="item"
|
||
:show-image="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 专家申请卡片 -->
|
||
<div class="expert-apply-card mt-4 bg-gradient-to-r from-blue-600 to-blue-800 rounded-lg p-6 text-white">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<h4 class="text-lg font-semibold mb-1">成为签约专家</h4>
|
||
<p class="text-blue-200 text-sm">分享您的智慧，服务政府决策</p>
|
||
</div>
|
||
<NuxtLink to="/expert/apply">
|
||
<a-button ghost size="large" type="primary">专家申请</a-button>
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 单位企业广告区 -->
|
||
<section class="ad-section">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="ad-banner bg-gradient-to-r from-purple-600 to-indigo-600 rounded-lg p-4 flex items-center justify-between">
|
||
<div class="flex items-center gap-4">
|
||
<span class="text-3xl">🏛️</span>
|
||
<div>
|
||
<div class="text-white font-semibold">会员服务</div>
|
||
<div class="text-purple-200 text-sm">享受专属服务，获取更多价值</div>
|
||
</div>
|
||
</div>
|
||
<NuxtLink to="/membership">
|
||
<a-button ghost size="large" type="primary">了解更多</a-button>
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 智库观察板块 -->
|
||
<section class="section bg-gray-50">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<SectionHeader icon="🔍" more-link="/think-tank" title="智库观察" />
|
||
|
||
<a-row :gutter="[24, 24]">
|
||
<!-- 左侧：智库介绍 -->
|
||
<a-col :lg="12" :xs="24">
|
||
<div class="content-card">
|
||
<div class="card-header">
|
||
<span class="card-tag tag-blue">智库介绍</span>
|
||
<NuxtLink class="more-link" to="/think-tank?type=intro">更多 ›</NuxtLink>
|
||
</div>
|
||
<div class="article-list">
|
||
<ArticleItem
|
||
v-for="item in thinktankIntroArticles"
|
||
:key="item.id"
|
||
:article="item"
|
||
:show-image="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
|
||
<!-- 右侧：智库视角 -->
|
||
<a-col :lg="12" :xs="24">
|
||
<div class="content-card">
|
||
<div class="card-header">
|
||
<span class="card-tag tag-green">智库视角</span>
|
||
<NuxtLink class="more-link" to="/think-tank?type=view">更多 ›</NuxtLink>
|
||
</div>
|
||
<div class="article-list">
|
||
<ArticleItem
|
||
v-for="item in thinktankViewArticles"
|
||
:key="item.id"
|
||
:article="item"
|
||
:show-image="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 翰墨文谈板块 -->
|
||
<section class="section">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<SectionHeader icon="✍️" more-link="/hanmo" title="翰墨文谈" />
|
||
|
||
<a-row :gutter="[24, 24]">
|
||
<!-- 左侧：翰墨文谈 -->
|
||
<a-col :lg="12" :xs="24">
|
||
<div class="content-card">
|
||
<div class="card-header">
|
||
<span class="card-tag tag-purple">翰墨文谈</span>
|
||
<NuxtLink class="more-link" to="/hanmo">更多 ›</NuxtLink>
|
||
</div>
|
||
<div class="article-list">
|
||
<ArticleItem
|
||
v-for="item in hanmoArticles"
|
||
:key="item.id"
|
||
:article="item"
|
||
:show-image="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
|
||
<!-- 右侧：决策服务 -->
|
||
<a-col :lg="12" :xs="24">
|
||
<div class="content-card">
|
||
<div class="card-header">
|
||
<span class="card-tag tag-orange">决策服务</span>
|
||
<NuxtLink class="more-link" to="/consultation">更多 ›</NuxtLink>
|
||
</div>
|
||
<div class="article-list">
|
||
<ArticleItem
|
||
v-for="item in decisionServiceArticles"
|
||
:key="item.id"
|
||
:article="item"
|
||
:show-image="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 底部功能区 -->
|
||
<section class="quick-links-section">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="quick-links-grid">
|
||
<NuxtLink class="quick-link-item" to="/about/join">
|
||
<span class="icon">📥</span>
|
||
<span class="text">资料下载</span>
|
||
</NuxtLink>
|
||
<NuxtLink class="quick-link-item" to="/about">
|
||
<span class="icon">📝</span>
|
||
<span class="text">申报模板</span>
|
||
</NuxtLink>
|
||
<NuxtLink class="quick-link-item" to="/contact">
|
||
<span class="icon">📤</span>
|
||
<span class="text">成果报送</span>
|
||
</NuxtLink>
|
||
<NuxtLink class="quick-link-item" to="/about/consultation">
|
||
<span class="icon">📞</span>
|
||
<span class="text">联系我们</span>
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { usePageSeo } from '@/composables/usePageSeo'
|
||
|
||
usePageSeo({
|
||
title: '首页',
|
||
description: '广西决策咨询网 - 政策要闻、决策参考、专家资讯'
|
||
})
|
||
|
||
// Banner 轮播数据
|
||
const bannerSlides = [
|
||
{
|
||
image: 'https://picsum.photos/1200/500?random=1',
|
||
title: '中心赴南宁区县调研县域数字经济发展情况',
|
||
tag: '调研活动'
|
||
},
|
||
{
|
||
image: 'https://picsum.photos/1200/500?random=2',
|
||
title: '自治区召开数字经济发展专题会议',
|
||
tag: '会议报道'
|
||
},
|
||
{
|
||
image: 'https://picsum.photos/1200/500?random=3',
|
||
title: '专家委员会2024年度工作研讨会召开',
|
||
tag: '专家动态'
|
||
}
|
||
]
|
||
|
||
// 模拟文章数据
|
||
interface Article {
|
||
id: number
|
||
title: string
|
||
date: string
|
||
source?: string
|
||
image?: string
|
||
link: string
|
||
}
|
||
|
||
const createArticle = (id: number, title: string, source = '决策咨询中心'): Article => ({
|
||
id,
|
||
title,
|
||
date: '2024-12-20',
|
||
source,
|
||
image: `https://picsum.photos/100/70?random=${id}`,
|
||
link: `/consultation/${id}`
|
||
})
|
||
|
||
// 决策咨询板块
|
||
const cityArticles = [
|
||
createArticle(1, '南宁市发布2024年产业转型升级实施方案'),
|
||
createArticle(2, '桂林市深化文旅融合发展取得新成效'),
|
||
createArticle(3, '柳州市新能源汽车产业链持续完善'),
|
||
]
|
||
const industryArticles = [
|
||
createArticle(4, '广西数字经济增速位居全国前列'),
|
||
createArticle(5, '北部湾经济区开放开发再上新台阶'),
|
||
]
|
||
const frontierArticles = [
|
||
createArticle(6, 'AI大模型在政务服务中的应用前景分析'),
|
||
createArticle(7, '碳中和目标下的绿色金融发展路径'),
|
||
]
|
||
const enterpriseArticles = [
|
||
createArticle(8, '广西本土企业数字化转型案例分享'),
|
||
createArticle(9, '重点龙头企业发展态势良好'),
|
||
]
|
||
|
||
// 决策参考板块
|
||
const policyArticles = [
|
||
createArticle(10, '国务院关于加快数字经济发展的意见', '国务院'),
|
||
createArticle(11, '广西壮族自治区数字经济发展规划（2024-2028年）', '自治区政府'),
|
||
]
|
||
const analysisArticles = [
|
||
createArticle(12, '《数字经济促进条例》重点内容解读'),
|
||
createArticle(13, '广西产业政策发展趋势深度分析'),
|
||
]
|
||
const researchArticles = [
|
||
createArticle(14, '2024年度广西经济发展研究报告'),
|
||
createArticle(15, '面向东盟的跨境产业合作研究'),
|
||
]
|
||
const specialArticles = [
|
||
createArticle(16, '乡村振兴与数字乡村建设专题研究'),
|
||
createArticle(17, '西部陆海新通道产业布局研究'),
|
||
]
|
||
|
||
// 专家资讯板块
|
||
const expertViewArticles = [
|
||
createArticle(18, '张教授：关于广西产业升级的几点建议'),
|
||
createArticle(19, '李专家：数字经济时代的政府治理创新'),
|
||
createArticle(20, '王教授：区域协调发展的思考与建议'),
|
||
]
|
||
const expertDynamicArticles = [
|
||
createArticle(21, '专家委员会赴桂林开展调研活动'),
|
||
createArticle(22, '新聘专家介绍：引进高层次人才'),
|
||
]
|
||
|
||
// 智库观察板块
|
||
const thinktankIntroArticles = [
|
||
createArticle(23, '广西决策咨询中心简介'),
|
||
createArticle(24, '中心组织架构与职能介绍'),
|
||
createArticle(25, '专家委员会成员一览'),
|
||
]
|
||
const thinktankViewArticles = [
|
||
createArticle(26, '当前经济形势分析与对策建议'),
|
||
createArticle(27, '广西高质量发展路径探析'),
|
||
createArticle(28, '数字经济赋能传统产业转型'),
|
||
]
|
||
|
||
// 翰墨文谈板块
|
||
const hanmoArticles = [
|
||
createArticle(29, '翰墨人生：一位老专家的从政感悟'),
|
||
createArticle(30, '从实践中来：基层调研的点点滴滴'),
|
||
]
|
||
const decisionServiceArticles = [
|
||
createArticle(31, '咨询服务项目介绍与申请指南'),
|
||
createArticle(32, '专项服务内容及收费标准'),
|
||
]
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* Banner 区域 */
|
||
.banner-section {
|
||
background: linear-gradient(135deg, #1e3a5f 0%, #0d1b2a 100%);
|
||
min-height: 420px;
|
||
}
|
||
|
||
.banner-bg {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: url('https://picsum.photos/1920/600?random=100') center/cover;
|
||
opacity: 0.15;
|
||
}
|
||
|
||
/* 快捷导航 */
|
||
.quick-nav {
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.quick-nav-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px 16px;
|
||
background: linear-gradient(135deg, #1e3a5f, #0d1b2a);
|
||
color: white;
|
||
font-weight: 600;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.quick-nav-title .icon {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.quick-nav-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.quick-nav-list li {
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.quick-nav-list li:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.quick-nav-list a {
|
||
display: block;
|
||
padding: 10px 16px;
|
||
color: #333;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.quick-nav-list a:hover {
|
||
background: #f8f9fa;
|
||
color: #1e3a5f;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
/* 轮播 */
|
||
.carousel-wrapper {
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.main-carousel :deep(.slick-dots) {
|
||
bottom: 16px;
|
||
}
|
||
|
||
.main-carousel :deep(.slick-dots li button) {
|
||
background: rgba(255, 255, 255, 0.6);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.main-carousel :deep(.slick-dots li.slick-active button) {
|
||
background: #fff;
|
||
}
|
||
|
||
.carousel-slide {
|
||
position: relative;
|
||
height: 360px;
|
||
}
|
||
|
||
.carousel-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.carousel-overlay {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
|
||
padding: 40px 24px 24px;
|
||
}
|
||
|
||
.carousel-tag {
|
||
display: inline-block;
|
||
padding: 4px 12px;
|
||
background: #e74c3c;
|
||
color: white;
|
||
font-size: 12px;
|
||
border-radius: 4px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.carousel-title {
|
||
color: white;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 广告区 */
|
||
.ad-section {
|
||
padding: 24px 0;
|
||
}
|
||
|
||
/* 通用板块 */
|
||
.section {
|
||
padding: 40px 0;
|
||
}
|
||
|
||
/* 内容卡片 */
|
||
.content-card {
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||
height: 100%;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 16px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 2px solid #f0f0f0;
|
||
}
|
||
|
||
.card-tag {
|
||
display: inline-block;
|
||
padding: 4px 16px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
border-radius: 4px;
|
||
color: white;
|
||
}
|
||
|
||
.tag-blue { background: #3498db; }
|
||
.tag-green { background: #27ae60; }
|
||
.tag-orange { background: #f39c12; }
|
||
.tag-red { background: #e74c3c; }
|
||
.tag-purple { background: #9b59b6; }
|
||
|
||
.more-link {
|
||
color: #999;
|
||
font-size: 13px;
|
||
text-decoration: none;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.more-link:hover {
|
||
color: #1e3a5f;
|
||
}
|
||
|
||
/* 文章列表 */
|
||
.article-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
/* 专家申请卡片 */
|
||
.expert-apply-card {
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3);
|
||
}
|
||
|
||
/* 底部功能区 */
|
||
.quick-links-section {
|
||
background: linear-gradient(135deg, #1e3a5f, #0d1b2a);
|
||
padding: 32px 0;
|
||
}
|
||
|
||
.quick-links-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 16px;
|
||
}
|
||
|
||
.quick-link-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 24px 16px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 8px;
|
||
text-decoration: none;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.quick-link-item:hover {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.quick-link-item .icon {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.quick-link-item .text {
|
||
color: white;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 响应式 */
|
||
@media (max-width: 768px) {
|
||
.banner-section {
|
||
min-height: auto;
|
||
}
|
||
|
||
.carousel-slide {
|
||
height: 240px;
|
||
}
|
||
|
||
.quick-links-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.quick-nav {
|
||
margin-bottom: 16px;
|
||
}
|
||
}
|
||
</style>
|