修改了首页
This commit is contained in:
370
app/pages/index.vue
Normal file
370
app/pages/index.vue
Normal file
@@ -0,0 +1,370 @@
|
||||
<template>
|
||||
<main class="portal-home">
|
||||
<header class="site-header">
|
||||
<div class="mx-auto max-w-screen-xl px-4">
|
||||
<div class="site-brand-wrap">
|
||||
<div class="site-badge">政务</div>
|
||||
<div>
|
||||
<h1 class="site-title">广西决策咨询网</h1>
|
||||
<p class="site-subtitle">权威发布 · 决策支持 · 服务发展</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="top-nav" aria-label="主导航">
|
||||
<NuxtLink
|
||||
v-for="item in navItems"
|
||||
:key="item.label"
|
||||
:to="item.to"
|
||||
class="nav-item"
|
||||
>
|
||||
{{ item.label }}
|
||||
</NuxtLink>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="hero-panel">
|
||||
<div class="mx-auto max-w-screen-xl px-4 py-8">
|
||||
<p class="hero-eyebrow">政府门户 · 官方导向</p>
|
||||
<h2 class="hero-title">聚焦广西决策咨询服务，建设高水平智库平台</h2>
|
||||
<p class="hero-desc">
|
||||
围绕政策解读、课题研究、战略合作与会员服务，提供规范、及时、可追溯的政务信息发布与决策支持。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mx-auto max-w-screen-xl px-4 py-8">
|
||||
<div class="content-grid">
|
||||
<article class="module-card">
|
||||
<h3 class="module-title">政策文件</h3>
|
||||
<ul class="module-list">
|
||||
<li v-for="item in policyDocs" :key="item">{{ item }}</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="module-card">
|
||||
<h3 class="module-title">重要通知</h3>
|
||||
<ul class="module-list">
|
||||
<li v-for="item in notices" :key="item">{{ item }}</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="module-card">
|
||||
<h3 class="module-title">领导讲话</h3>
|
||||
<ul class="module-list">
|
||||
<li v-for="item in speeches" :key="item">{{ item }}</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="feature-block">
|
||||
<h3 class="feature-title">重点工作</h3>
|
||||
<div class="feature-grid">
|
||||
<div v-for="item in focusWorks" :key="item.title" class="feature-card">
|
||||
<h4>{{ item.title }}</h4>
|
||||
<p>{{ item.desc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="mx-auto max-w-screen-xl px-4 py-6">
|
||||
<h3 class="friend-title">友情链接</h3>
|
||||
<div class="friend-links">
|
||||
<a v-for="item in friendLinks" :key="item.name" :href="item.url" target="_blank" rel="noreferrer">
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</div>
|
||||
<p class="copyright">© 广西决策咨询网 | 政务信息仅供公开发布与查询使用</p>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { usePageSeo } from "@/composables/usePageSeo"
|
||||
|
||||
usePageSeo({
|
||||
title: "广西决策咨询网",
|
||||
description: "广西决策咨询网门户首页，发布政策文件、重要通知、领导讲话与课题研究信息。",
|
||||
path: "/"
|
||||
})
|
||||
|
||||
const navItems = [
|
||||
{ label: "网站首页", to: "/" },
|
||||
{ label: "学会活动", to: "/article/activities" },
|
||||
{ label: "决策资讯", to: "/article/news" },
|
||||
{ label: "战略合作", to: "/article/coop" },
|
||||
{ label: "会员服务", to: "/member" },
|
||||
{ label: "课题研究", to: "/article/research" },
|
||||
{ label: "学会党建", to: "/article/party" },
|
||||
{ label: "关于我们", to: "/about" }
|
||||
]
|
||||
|
||||
const policyDocs = [
|
||||
"广西重点产业发展政策解读（2026年）",
|
||||
"自治区决策咨询课题管理办法（修订）",
|
||||
"关于加强高端智库成果转化的实施意见",
|
||||
"政务信息公开与数据安全管理规范"
|
||||
]
|
||||
|
||||
const notices = [
|
||||
"关于申报2026年度重点课题的通知",
|
||||
"学会专家库入库审核结果公示",
|
||||
"战略合作单位联络员培训安排",
|
||||
"清明节假期值班与应急工作通知"
|
||||
]
|
||||
|
||||
const speeches = [
|
||||
"坚持问题导向，提升咨政建言质量",
|
||||
"服务地方治理现代化的智库路径",
|
||||
"打造开放协同的决策咨询共同体",
|
||||
"推动研究成果向政策实践高效转化"
|
||||
]
|
||||
|
||||
const focusWorks = [
|
||||
{ title: "课题研究", desc: "围绕重大现实问题开展专题研究，形成可落地的政策建议。" },
|
||||
{ title: "战略合作", desc: "联动高校、研究机构与行业协会，构建协同创新平台。" },
|
||||
{ title: "会员服务", desc: "提供成果交流、培训活动和资源对接等综合服务。" },
|
||||
{ title: "学会党建", desc: "强化党建引领，推动业务发展与组织建设深度融合。" }
|
||||
]
|
||||
|
||||
const friendLinks = [
|
||||
{ name: "广西壮族自治区人民政府", url: "https://www.gxzf.gov.cn" },
|
||||
{ name: "中国社会科学院", url: "https://www.cass.cn" },
|
||||
{ name: "国务院发展研究中心", url: "https://www.drc.gov.cn" },
|
||||
{ name: "广西社科联", url: "http://www.gxskl.gov.cn" }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.portal-home {
|
||||
min-height: 100vh;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
background: linear-gradient(180deg, #9f1313, #c31818);
|
||||
border-bottom: 3px solid #f3d27a;
|
||||
box-shadow: 0 8px 20px rgba(110, 10, 10, 0.25);
|
||||
}
|
||||
|
||||
.site-brand-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 18px 0 14px;
|
||||
}
|
||||
|
||||
.site-badge {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #8b1111;
|
||||
background: linear-gradient(180deg, #f8df9f, #e7bd5b);
|
||||
}
|
||||
|
||||
.site-title {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
letter-spacing: 0.06em;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.site-subtitle {
|
||||
margin: 6px 0 0;
|
||||
color: rgba(255, 255, 255, 0.88);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
color: #fff3d7;
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
padding: 12px 18px;
|
||||
border-bottom: 3px solid transparent;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-item:hover,
|
||||
.nav-item.router-link-active {
|
||||
color: #fff;
|
||||
border-bottom-color: #f5d07a;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.hero-panel {
|
||||
background:
|
||||
linear-gradient(140deg, rgba(140, 12, 12, 0.9), rgba(173, 18, 18, 0.88)),
|
||||
repeating-linear-gradient(45deg, transparent, transparent 18px, rgba(255, 255, 255, 0.03) 18px, rgba(255, 255, 255, 0.03) 36px);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hero-eyebrow {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 233, 190, 0.95);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
margin: 12px 0;
|
||||
font-size: 34px;
|
||||
line-height: 1.35;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
margin: 0;
|
||||
max-width: 780px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.module-card {
|
||||
grid-column: span 12;
|
||||
border: 1px solid #eed7d7;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.module-card {
|
||||
grid-column: span 4;
|
||||
}
|
||||
}
|
||||
|
||||
.module-title {
|
||||
margin: 0;
|
||||
padding: 14px 16px;
|
||||
font-size: 18px;
|
||||
color: #941515;
|
||||
background: linear-gradient(180deg, #fff6f6, #ffeaea);
|
||||
border-bottom: 1px solid #efd5d5;
|
||||
}
|
||||
|
||||
.module-list {
|
||||
list-style: none;
|
||||
padding: 10px 16px 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.module-list li {
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px dashed #ecd1d1;
|
||||
color: #2d2d2d;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.module-list li:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.feature-block {
|
||||
margin-top: 24px;
|
||||
border: 1px solid #efd4d4;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
margin: 0;
|
||||
padding: 14px 16px;
|
||||
color: #941515;
|
||||
font-size: 20px;
|
||||
border-bottom: 1px solid #efd4d4;
|
||||
background: linear-gradient(180deg, #fff9f9, #fff0f0);
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
grid-column: span 12;
|
||||
background: #fffafa;
|
||||
border: 1px solid #f2dede;
|
||||
border-radius: 8px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.feature-card {
|
||||
grid-column: span 6;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-card h4 {
|
||||
margin: 0;
|
||||
color: #8f1313;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
margin: 8px 0 0;
|
||||
line-height: 1.7;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
margin-top: 20px;
|
||||
background: #f0ecec;
|
||||
border-top: 1px solid #dcc8c8;
|
||||
}
|
||||
|
||||
.friend-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #6f6f6f;
|
||||
}
|
||||
|
||||
.friend-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 16px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.friend-links a {
|
||||
color: #514a4a;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.friend-links a:hover {
|
||||
color: #931414;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
margin: 14px 0 0;
|
||||
color: #7f7f7f;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user