Skip to content

E
emergency-project
Commit e22e5f7a by 杨子
Options

路由调整

parent 882f2d5f
Showing with 401 additions and 185 deletions
src/App.vue
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 --> <!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template> <template>
<div class="min-h-screen bg-gray-50"> <router-view />
<!-- 顶部横幅 -->
<header class="bg-white shadow">
<div class="container mx-auto px-4 h-20 flex items-center">
<img
src="https://ai-public.mastergo.com/ai/img_res/38fd70bdc77f4305c862a0962f46c48c.jpg"
alt="国徽"
class="h-14 mr-4"
/>
<div class="flex-1 flex items-center justify-between">
<h1 class="text-2xl font-bold text-black">
太原市互联网应急指挥和举报中心
</h1>
<div class="relative w-[360px]">
<el-input
v-model="searchQuery"
class="!rounded-full"
placeholder="搜索新闻、通知、政策文件..."
:prefix-icon="Search"
/>
</div>
</div>
</div>
</header>
<!-- 主导航 -->
<nav class="bg-blue-800 text-white">
<div class="container mx-auto px-4">
<ul class="flex space-x-8 h-14">
<li
v-for="(item, index) in navItems"
:key="index"
class="flex items-center cursor-pointer hover:bg-blue-700 px-4"
:class="{ 'bg-blue-700': activeNav === index }"
@click="navigateTo(index)"
>
{{ item }}
</li>
</ul>
</div>
</nav>
<router-view></router-view>
<!-- 页脚 -->
<footer class="bg-gray-800 text-gray-300 mt-10">
<div class="container mx-auto px-4 py-10 w-[1440px]">
<div class="grid grid-cols-2 gap-8">
<div>
<h3 class="text-lg font-medium mb-4">联系我们</h3>
<div class="space-y-2">
<p>地址：山西省太原市迎泽区迎泽大街 369 号</p>
<p>电话：0351-12345678</p>
<p>邮箱：contact@tynet.gov.cn</p>
</div>
</div>
<div>
<h3 class="text-lg font-medium mb-4">关注我们</h3>
<div class="flex space-x-4">
<el-icon class="text-2xl"><Message /></el-icon>
<el-icon class="text-2xl"><Share /></el-icon>
<el-icon class="text-2xl"><Link /></el-icon>
</div>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-700 text-center">
<p>Copyright © 2024 太原市互联网应急指挥和举报中心 版权所有</p>
<p class="mt-2">晋ICP备12345678号-1 | 晋公网安备 14010002000001号</p>
</div>
</div>
</footer>
</div>
</template> </template>
<script setup> <script setup>
import { ref } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Autoplay } from "swiper/modules";
import { useRouter } from "vue-router";
import {
VideoPlay,
Message,
Share,
Link,
Search,
Document,
} from "@element-plus/icons-vue";
const router = useRouter();
const swiperModules = [Pagination, Autoplay];
const searchQuery = ref("");
const activeNav = ref(0);
const navItems = ["首页", "新闻热点", "太原新闻", "山西新闻", "通知公告"];
function navigateTo(index) {
const routes = [
{ path: "/home/home" },
{ path: "/home/news" },
{ path: "/home/tynews" },
{ path: "/home/sxnews" },
{ path: "/home/announcements" },
];
router.push(routes[index].path).catch((err) => {});
activeNav.value = index;
}
const hotNews = [
{
title: '太原市获评"2023年度网络安全示范城市"',
date: "2024-01-13",
},
{
title: "我市开展网络安全专项整治行动",
date: "2024-01-12",
},
{
title: "太原互联网企业助力乡村振兴",
date: "2024-01-11",
},
];
const videoNews = [
{
title: "2024太原网络安全周开幕式",
cover:
"https://ai-public.mastergo.com/ai/img_res/c127709d932c688f0fd802b468fbeb1b.jpg",
},
{
title: "太原智慧城市建设成果展示",
cover:
"https://ai-public.mastergo.com/ai/img_res/04b4d2ca1d91d73dac6a0f4316b13165.jpg",
},
];
</script> </script>
<style scoped>
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
src/layout/news.vue 0 → 100644
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="min-h-screen bg-gray-50">
<!-- 顶部横幅 -->
<header class="bg-white shadow">
<div class="container mx-auto px-4 h-20 flex items-center">
<img
src="https://ai-public.mastergo.com/ai/img_res/38fd70bdc77f4305c862a0962f46c48c.jpg"
alt="国徽"
class="h-14 mr-4"
/>
<div class="flex-1 flex items-center justify-between">
<h1 class="text-2xl font-bold text-black">
太原市互联网应急指挥和举报中心
</h1>
<div class="relative w-[360px]">
<el-input
v-model="searchQuery"
class="!rounded-full"
placeholder="搜索新闻、通知、政策文件..."
:prefix-icon="Search"
/>
</div>
</div>
</div>
</header>
<!-- 主导航 -->
<nav class="bg-blue-800 text-white">
<div class="container mx-auto px-4">
<ul class="flex space-x-8 h-14">
<li
v-for="(item, index) in navItems"
:key="index"
class="flex items-center cursor-pointer hover:bg-blue-700 px-4"
:class="{ 'bg-blue-700': activeNav === index }"
@click="navigateTo(index)"
>
{{ item }}
</li>
</ul>
</div>
</nav>
<router-view></router-view>
<!-- 页脚 -->
<footer class="bg-gray-800 text-gray-300 mt-10">
<div class="container mx-auto px-4 py-10 w-[1440px]">
<div class="grid grid-cols-2 gap-8">
<div>
<h3 class="text-lg font-medium mb-4">联系我们</h3>
<div class="space-y-2">
<p>地址：山西省太原市迎泽区迎泽大街 369 号</p>
<p>电话：0351-12345678</p>
<p>邮箱：contact@tynet.gov.cn</p>
</div>
</div>
<div>
<h3 class="text-lg font-medium mb-4">关注我们</h3>
<div class="flex space-x-4">
<el-icon class="text-2xl"><Message /></el-icon>
<el-icon class="text-2xl"><Share /></el-icon>
<el-icon class="text-2xl"><Link /></el-icon>
</div>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-700 text-center">
<p>Copyright © 2024 太原市互联网应急指挥和举报中心 版权所有</p>
<p class="mt-2">晋ICP备12345678号-1 | 晋公网安备 14010002000001号</p>
</div>
</div>
</footer>
</div>
</template>
<script setup>
import { ref } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Autoplay } from "swiper/modules";
import { useRouter } from "vue-router";
import {
VideoPlay,
Message,
Share,
Link,
Search,
Document,
} from "@element-plus/icons-vue";
const router = useRouter();
const swiperModules = [Pagination, Autoplay];
const searchQuery = ref("");
const activeNav = ref(0);
const navItems = ["首页", "新闻热点", "太原新闻", "山西新闻", "通知公告"];
function navigateTo(index) {
const routes = [
{ path: "/home/home" },
{ path: "/home/news" },
{ path: "/home/tynews" },
{ path: "/home/sxnews" },
{ path: "/home/announcements" },
];
router.push(routes[index].path).catch((err) => {});
activeNav.value = index;
}
const hotNews = [
{
title: '太原市获评"2023年度网络安全示范城市"',
date: "2024-01-13",
},
{
title: "我市开展网络安全专项整治行动",
date: "2024-01-12",
},
{
title: "太原互联网企业助力乡村振兴",
date: "2024-01-11",
},
];
const videoNews = [
{
title: "2024太原网络安全周开幕式",
cover:
"https://ai-public.mastergo.com/ai/img_res/c127709d932c688f0fd802b468fbeb1b.jpg",
},
{
title: "太原智慧城市建设成果展示",
cover:
"https://ai-public.mastergo.com/ai/img_res/04b4d2ca1d91d73dac6a0f4316b13165.jpg",
},
];
</script>
<style scoped>
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
\ No newline at end of file
src/layout/py.vue 0 → 100644
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="w-[1440px] mx-auto">
<header class="hero-bg text-white">
<div class="container mx-auto px-8 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<h1 class="text-2xl font-bold">山西互联网联合辟谣平台</h1>
<p class="text-sm opacity-80">主办：山西省互联网信息办公室</p>
</div>
<div class="text-sm opacity-80">承办：黄河新闻网</div>
</div>
</div>
<nav class="bg-white/10 backdrop-blur-sm">
<div class="container mx-auto px-8">
<div class="flex justify-between items-center">
<div
v-for="(item, index) in menuItems"
:key="index"
class="py-4 px-6 cursor-pointer hover:bg-white/10 transition-colors"
:class="{ 'bg-white/10': activeIndex === String(index) }"
@click="activeIndex = String(index)"
>
<span class="text-white">{{ item }}</span>
</div>
</div>
</div>
</nav>
</header>
<router-view />
<footer class="bg-gray-100 py-8">
<div class="container mx-auto px-8">
<div class="text-center text-sm text-gray-600">
<p class="mb-2">联系电话：0351-5236042 技术支持：0351-5236044</p>
<p class="mb-2">
互联网新闻信息服务许可证：14120180001
增值电信业务经营许可证：晋B2-20060016189
</p>
<p>版权所有 © 2024 山西互联网联合辟谣平台 保留所有权利</p>
</div>
</div>
</footer>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Navigation, Autoplay } from "swiper/modules";
import {
Document,
UserFilled,
Lock,
List,
Service,
Bell,
Collection,
} from "@element-plus/icons-vue";
const activeIndex = ref("0");
const swiperModules = [Pagination, Navigation, Autoplay];
const menuItems = [
"首页",
"权威发布",
"辟谣专区",
"专家解读",
"法律法规",
"读图识谣",
];
const slides = [
{
src: "https://ai-public.mastergo.com/ai/img_res/a6c6b005094da8f76e79def3225b4ea0.jpg",
},
{
src: "https://ai-public.mastergo.com/ai/img_res/cc20fdfc4e9bcd53c4f517b03036c8a2.jpg",
},
{
src: "https://ai-public.mastergo.com/ai/img_res/40e648e87a974e8fe013b6f4b9b0ac2b.jpg",
},
];
const quickLinks = [
{ icon: Document, title: "最新辟谣" },
{ icon: UserFilled, title: "举报入口" },
{ icon: Lock, title: "安全提醒" },
{ icon: List, title: "政策法规" },
{ icon: Service, title: "在线咨询" },
{ icon: Bell, title: "举报中心" },
{ icon: Collection, title: "知识库" },
];
const sections = [
{
title: "专家解读",
items: [
"专家详解：新冠病毒变异株的特点与防护要点",
"权威专家谈饮食健康：科学认识营养补充剂",
"医学专家解读：常见慢性病的预防与管理",
"专家视角：解读最新公共卫生政策",
"心理健康专家：如何应对现代生活压力",
"环境卫生专家：空气污染与健康防护",
"运动医学专家：科学健身指南",
"营养学专家：平衡饮食的重要性",
"中医专家：传统养生之道的现代价值",
"公共卫生专家：群体免疫的科学认识",
],
},
{
title: "辟谣专区",
items: [
"辟谣：喝热水可以预防新冠病毒感染？",
"谣言粉碎：5G基站会传播病毒",
"假新闻核实：某食品添加剂致癌？",
"事实核查：网传特效药可治百病",
"辟谣：转发朋友圈可以赚钱？",
"真相：某款保健品包治百病",
"谣言终结：吃某水果可预防癌症",
"揭秘：网传养生方法的科学依据",
],
},
{
title: "法律法规",
items: [
"《中华人民共和国网络安全法》解读",
"《互联网信息服务管理办法》要点",
"《网络谣言治理规定》重点条款",
"《个人信息保护法》主要内容",
"《数据安全法》核心要义",
"《未成年人网络保护条例》解析",
"《网络信息内容生态治理规定》",
"《网络安全审查办法》要点",
"《互联网新闻信息服务管理规定》",
"《网络直播营销管理办法》解读",
],
},
];
const serviceCards = [
{
image:
"https://ai-public.mastergo.com/ai/img_res/2655e0a0acf47c07b9c8ff060c82bbc1.jpg",
title: "健康科普讲堂",
description: "权威专家为您解读健康知识",
},
{
image:
"https://ai-public.mastergo.com/ai/img_res/2f71d88aad56bf2fd7cf852bb161fa9a.jpg",
title: "食品安全专区",
description: "关注食品安全 守护健康生活",
},
{
image:
"https://ai-public.mastergo.com/ai/img_res/96a618b8d32896b05bbf19a1e237bb5c.jpg",
title: "网络安全知识",
description: "提高网络安全意识",
},
{
image:
"https://ai-public.mastergo.com/ai/img_res/7f28f51c022005811277c6aeb56a604e.jpg",
title: "法律咨询服务",
description: "专业律师在线解答",
},
{
image:
"https://ai-public.mastergo.com/ai/img_res/eca0048f8f7939e3dacd3026bdb7cebb.jpg",
title: "科技辟谣",
description: "揭穿科技谣言真相",
},
{
image:
"https://ai-public.mastergo.com/ai/img_res/067a33b74280646e216710bf650a909f.jpg",
title: "环保真相",
description: "环保谣言不再迷惑",
},
];
</script>
<style scoped>
.hero-bg {
background: linear-gradient(135deg, #001f3f, #0047ab);
}
:deep(.el-card) {
border: 1px solid rgba(0, 31, 63, 0.1);
transition: all 0.3s ease;
}
:deep(.el-scrollbar__wrap) {
overflow-x: hidden;
}
:deep(.el-card.is-hover-shadow:hover) {
box-shadow: 0 8px 16px rgba(0, 31, 63, 0.12);
transform: translateY(-2px);
}
:deep(.el-card.is-hover-shadow) {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
:deep(.el-card:hover) {
border-color: rgba(0, 31, 63, 0.3);
box-shadow: 0 12px 28px rgba(0, 31, 63, 0.15);
}
:deep(.el-card__body) {
padding: 16px;
}
:deep(.el-link.el-link--default:hover) {
color: #0047ab;
}
:deep(.service-swiper .swiper-button-prev),
:deep(.service-swiper .swiper-button-next) {
background-color: rgba(255, 255, 255, 0.9);
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
color: #001f3f;
}
:deep(.service-swiper .swiper-button-prev:after),
:deep(.service-swiper .swiper-button-next:after) {
font-size: 16px;
}
:deep(.service-swiper .swiper-button-prev) {
left: -20px;
}
:deep(.service-swiper .swiper-button-next) {
right: -20px;
}
:deep(.service-swiper .swiper-button-disabled) {
opacity: 0;
}
</style>
\ No newline at end of file
src/layout/wm.vue 0 → 100644
<template>
<div>12121</div>
</template>
<script lang="ts" setup></script>
\ No newline at end of file
src/router/index.ts
...@@ -6,42 +6,57 @@ import ShanxiNews from "../views/home/sxnews/ShanxiNews.vue"; ...@@ -6,42 +6,57 @@ import ShanxiNews from "../views/home/sxnews/ShanxiNews.vue";
import Announcements from "../views/home/announcements/Announcements.vue"; import Announcements from "../views/home/announcements/Announcements.vue";
import PyHome from "../views/py/PyHome.vue"; import PyHome from "../views/py/PyHome.vue";
import NewsLayout from "../layout/news.vue";
import PyLayout from '../layout/py.vue';
import WmLayout from '../layout/wm.vue';
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
routes: [ routes: [
{ {
path: "/home/home", path: "/",
name: "home", name: "home",
redirect: "/home/home",
component: NewsLayout,
children: [
{
path: "/home/home",
component: HomeView, component: HomeView,
}, },
{ {
path: "/home/news", path: "/home/news",
name: "News",
component: News, component: News,
}, },
{ {
path: "/home/tynews", path: "/home/tynews",
name: "TyNews",
component: TaiyuanNews, component: TaiyuanNews,
}, },
{ ],
path: "/home/sxnews",
name: "SxNews",
component: ShanxiNews,
},
{
path: "/home/announcements",
name: "Announcements",
component: Announcements,
}, },
{ {
path: "/py", path: "/py",
name: "py",
component: PyLayout,
children: [
{
name: "PyHome", name: "PyHome",
path: "/py/pyhome",
component: PyHome, component: PyHome,
}, },
], ],
},
{
path: "/wm",
name: "wm",
component: WmLayout,
children: [
{
path: "/wm/announcements",
component: Announcements,
},
],
},
],
}); });
export default router; export default router;
src/views/py/PyHome.vue
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 --> <!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template> <template>
<div class="w-[1440px] mx-auto"> <div class="w-[1440px] mx-auto">
<header class="hero-bg text-white">
<div class="container mx-auto px-8 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<h1 class="text-2xl font-bold">山西互联网联合辟谣平台</h1>
<p class="text-sm opacity-80">主办：山西省互联网信息办公室</p>
</div>
<div class="text-sm opacity-80">承办：黄河新闻网</div>
</div>
</div>
<nav class="bg-white/10 backdrop-blur-sm">
<div class="container mx-auto px-8">
<div class="flex justify-between items-center">
<div
v-for="(item, index) in menuItems"
:key="index"
class="py-4 px-6 cursor-pointer hover:bg-white/10 transition-colors"
:class="{ 'bg-white/10': activeIndex === String(index) }"
@click="activeIndex = String(index)"
>
<span class="text-white">{{ item }}</span>
</div>
</div>
</div>
</nav>
</header>
<main class="container mx-auto px-8 py-8"> <main class="container mx-auto px-8 py-8">
<div class="bg-white rounded-lg shadow-lg p-6 mb-8"> <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
<h2 class="text-2xl font-bold mb-4"> <h2 class="text-2xl font-bold mb-4">
...@@ -131,18 +105,6 @@ ...@@ -131,18 +105,6 @@
</div> </div>
</div> </div>
</main> </main>
<footer class="bg-gray-100 py-8">
<div class="container mx-auto px-8">
<div class="text-center text-sm text-gray-600">
<p class="mb-2">联系电话：0351-5236042 技术支持：0351-5236044</p>
<p class="mb-2">
互联网新闻信息服务许可证：14120180001
增值电信业务经营许可证：晋B2-20060016189
</p>
<p>版权所有 © 2024 山西互联网联合辟谣平台 保留所有权利</p>
</div>
</div>
</footer>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment