Skip to content

E
emergency-project
Commit 6c17a607 by York
Options

部分完成

parent e22e5f7a
Showing with 3404 additions and 396 deletions
index.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <title>太原市互联网应急指挥和举报中心</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
......
src/App.vue
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template> <template>
<router-view /> <router-view />
</template> </template>
<script setup> <script setup></script>
</script>
src/layout/index.vue deleted 100644 → 0
<template>
<div></div>
</template>
<script>
export default {
setup() {
return {};
},
};
</script>
<style lang="scss" scoped></style>
src/layout/news.vue
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template> <template>
<div class="min-h-screen bg-gray-50"> <div class="bg-gray-50">
<!-- 顶部横幅 --> <!-- 顶部横幅 -->
<header class="bg-white shadow"> <header class="bg-white shadow">
<div class="container mx-auto px-4 h-20 flex items-center"> <div class="container mx-auto px-0 h-20 flex items-center">
<img <img
src="https://ai-public.mastergo.com/ai/img_res/38fd70bdc77f4305c862a0962f46c48c.jpg" src="https://ai-public.mastergo.com/ai/img_res/38fd70bdc77f4305c862a0962f46c48c.jpg"
alt="国徽" alt="国徽"
class="h-14 mr-4" class="h-14 mr-4"
/> />
<div class="flex-1 flex items-center justify-between"> <div class="flex-1 flex items-center justify-between">
<h1 class="text-2xl font-bold text-black"> <h1 class="text-2xl font-bold text-black">
太原市互联网应急指挥和举报中心 太原市互联网应急指挥和举报中心
</h1> </h1>
<div class="relative w-[360px]"> <div class="relative w-[360px]">
<el-input <el-input
v-model="searchQuery" v-model="searchQuery"
class="!rounded-full" class="!rounded-full"
placeholder="搜索新闻、通知、政策文件..." placeholder="搜索新闻、通知、政策文件..."
:prefix-icon="Search" :prefix-icon="Search"
/> />
</div>
</div> </div>
</div> </div>
</header> </div>
<!-- 主导航 --> </header>
<nav class="bg-blue-800 text-white"> <!-- 主导航 -->
<div class="container mx-auto px-4"> <nav class="bg-blue-800 text-white">
<ul class="flex space-x-8 h-14"> <div class="container mx-auto px-4">
<li <ul class="flex space-x-8 h-14">
v-for="(item, index) in navItems" <li
:key="index" v-for="(item, index) in navItems"
class="flex items-center cursor-pointer hover:bg-blue-700 px-4" :key="index"
:class="{ 'bg-blue-700': activeNav === index }" class="flex items-center cursor-pointer hover:bg-blue-700 px-4"
@click="navigateTo(index)" :class="{ 'bg-blue-700': activeNav === index }"
> @click="navigateTo(index)"
{{ item }} >
</li> <span class="text-white">{{ item }}</span>
</ul> </li>
</div> </ul>
</nav> </div>
</nav>
<router-view></router-view>
<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]"> <footer class="bg-gray-800 text-gray-300 mt-10">
<div class="grid grid-cols-2 gap-8"> <div class="container mx-auto px-4 py-10 w-[1440px]">
<div> <div class="grid grid-cols-2 gap-8">
<h3 class="text-lg font-medium mb-4">联系我们</h3> <div>
<div class="space-y-2"> <h3 class="text-lg font-medium mb-4">联系我们</h3>
<p>地址：山西省太原市迎泽区迎泽大街 369 号</p> <div class="space-y-2">
<p>电话：0351-12345678</p> <p>地址：山西省太原市迎泽区迎泽大街 369 号</p>
<p>邮箱：contact@tynet.gov.cn</p> <p>电话：0351-12345678</p>
</div> <p>邮箱：contact@tynet.gov.cn</p>
</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> </div>
<div class="mt-8 pt-8 border-t border-gray-700 text-center"> <div>
<p>Copyright © 2024 太原市互联网应急指挥和举报中心 版权所有</p> <h3 class="text-lg font-medium mb-4">关注我们</h3>
<p class="mt-2">晋ICP备12345678号-1 | 晋公网安备 14010002000001号</p> <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> </div>
</footer> <div class="mt-8 pt-8 border-t border-gray-700 text-center">
</div> <p>Copyright © 2024 太原市互联网应急指挥和举报中心 版权所有</p>
</template> <p class="mt-2">晋ICP备12345678号-1 | 晋公网安备 14010002000001号</p>
<script setup> </div>
import { ref } from "vue"; </div>
import { Swiper, SwiperSlide } from "swiper/vue"; </footer>
import { Pagination, Autoplay } from "swiper/modules"; </div>
import { useRouter } from "vue-router"; </template>
import { <script setup>
VideoPlay, import { ref } from "vue";
Message, import { Swiper, SwiperSlide } from "swiper/vue";
Share, import { Pagination, Autoplay } from "swiper/modules";
Link, import { useRouter } from "vue-router";
Search, import {
Document, VideoPlay,
} from "@element-plus/icons-vue"; Message,
const router = useRouter(); Share,
const swiperModules = [Pagination, Autoplay]; Link,
const searchQuery = ref(""); Search,
const activeNav = ref(0); Document,
const navItems = ["首页", "新闻热点", "太原新闻", "山西新闻", "通知公告"]; } from "@element-plus/icons-vue";
function navigateTo(index) { const router = useRouter();
const routes = [ const swiperModules = [Pagination, Autoplay];
{ path: "/home/home" }, const searchQuery = ref("");
{ path: "/home/news" }, const activeNav = ref(0);
{ path: "/home/tynews" }, const navItems = ["首页", "新闻热点", "太原新闻", "山西新闻", "通知公告"];
{ path: "/home/sxnews" },
{ path: "/home/announcements" }, function navigateTo(index) {
]; const routes = [
router.push(routes[index].path).catch((err) => {}); { path: "/home/home" },
activeNav.value = index; { path: "/home/news" },
} { path: "/home/tynews" },
{ path: "/home/sxnews" },
const hotNews = [ { path: "/home/announcements" },
{
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> router.push(routes[index].path).catch((err) => {});
<style scoped> activeNav.value = index;
.line-clamp-2 { }
display: -webkit-box;
-webkit-line-clamp: 2; const hotNews = [
-webkit-box-orient: vertical; {
overflow: hidden; title: '太原市获评"2023年度网络安全示范城市"',
} date: "2024-01-13",
</style> },
{
\ No newline at end of file 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>
src/layout/py.vue
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 --> <!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template> <template>
<div class="w-[1440px] mx-auto"> <div class="mx-auto">
<header class="hero-bg text-white"> <header class="hero-bg text-white">
<div class="container mx-auto px-8 py-4"> <div class="container mx-auto px-8 py-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">
<h1 class="text-2xl font-bold">山西互联网联合辟谣平台</h1> <h1 class="text-2xl font-bold">山西互联网联合辟谣平台</h1>
<p class="text-sm opacity-80">主办：山西省互联网信息办公室</p> <p class="text-sm opacity-80">主办：山西省互联网信息办公室</p>
</div>
<div class="text-sm opacity-80">承办：黄河新闻网</div>
</div> </div>
<div class="text-sm opacity-80">承办：黄河新闻网</div>
</div> </div>
<nav class="bg-white/10 backdrop-blur-sm"> </div>
<div class="container mx-auto px-8"> <nav class="bg-white/10 backdrop-blur-sm">
<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="container mx-auto px-8">
<div class="text-center text-sm text-gray-600"> <div class="flex justify-between items-center">
<p class="mb-2">联系电话：0351-5236042 技术支持：0351-5236044</p> <div
<p class="mb-2"> v-for="(item, index) in menuItems"
互联网新闻信息服务许可证：14120180001 :key="index"
增值电信业务经营许可证：晋B2-20060016189 class="py-4 px-6 cursor-pointer hover:bg-white/10 transition-colors"
</p> :class="{ 'bg-white/10': activeIndex === index }"
<p>版权所有 © 2024 山西互联网联合辟谣平台 保留所有权利</p> @click="navigateTo(index)"
>
<span class="text-white">{{ item }}</span>
</div>
</div> </div>
</div> </div>
</footer> </nav>
</div> </header>
</template> <router-view />
<script lang="ts" setup> <footer class="bg-gray-100 py-8">
import { ref } from "vue"; <div class="container mx-auto px-8">
import { Swiper, SwiperSlide } from "swiper/vue"; <div class="text-center text-sm text-gray-600">
import { Pagination, Navigation, Autoplay } from "swiper/modules"; <p class="mb-2">联系电话：0351-5236042 技术支持：0351-5236044</p>
import { <p class="mb-2">
Document, 互联网新闻信息服务许可证：14120180001
UserFilled, 增值电信业务经营许可证：晋B2-20060016189
Lock, </p>
List, <p>版权所有 © 2024 山西互联网联合辟谣平台 保留所有权利</p>
Service, </div>
Bell, </div>
Collection, </footer>
} from "@element-plus/icons-vue"; </div>
const activeIndex = ref("0"); </template>
const swiperModules = [Pagination, Navigation, Autoplay]; <script lang="ts" setup>
const menuItems = [ import { ref } from "vue";
"首页", import { Swiper, SwiperSlide } from "swiper/vue";
"权威发布", import { Pagination, Navigation, Autoplay } from "swiper/modules";
"辟谣专区", import { useRouter } from "vue-router";
"专家解读",
"法律法规", import {
"读图识谣", Document,
]; UserFilled,
const slides = [ Lock,
{ List,
src: "https://ai-public.mastergo.com/ai/img_res/a6c6b005094da8f76e79def3225b4ea0.jpg", Service,
}, Bell,
{ Collection,
src: "https://ai-public.mastergo.com/ai/img_res/cc20fdfc4e9bcd53c4f517b03036c8a2.jpg", } from "@element-plus/icons-vue";
}, const activeIndex = ref("0");
{ const router = useRouter();
src: "https://ai-public.mastergo.com/ai/img_res/40e648e87a974e8fe013b6f4b9b0ac2b.jpg", const swiperModules = [Pagination, Navigation, Autoplay];
}, const menuItems = [
]; "首页",
const quickLinks = [ "权威发布",
{ icon: Document, title: "最新辟谣" }, "辟谣专区",
{ icon: UserFilled, title: "举报入口" }, "专家解读",
{ icon: Lock, title: "安全提醒" }, "法律法规",
{ icon: List, title: "政策法规" }, "读图识谣",
{ icon: Service, title: "在线咨询" }, ];
{ icon: Bell, title: "举报中心" },
{ icon: Collection, title: "知识库" }, function navigateTo(index) {
]; const routes = [
const sections = [ { path: "/py/pyhome" },
{ { path: "/py/authority" },
title: "专家解读", { path: "/py/rumor" },
items: [ { path: "/py/expert" },
"专家详解：新冠病毒变异株的特点与防护要点", { path: "/py/law" },
"权威专家谈饮食健康：科学认识营养补充剂", { path: "/py/reading" },
"医学专家解读：常见慢性病的预防与管理",
"专家视角：解读最新公共卫生政策",
"心理健康专家：如何应对现代生活压力",
"环境卫生专家：空气污染与健康防护",
"运动医学专家：科学健身指南",
"营养学专家：平衡饮食的重要性",
"中医专家：传统养生之道的现代价值",
"公共卫生专家：群体免疫的科学认识",
],
},
{
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> router.push(routes[index].path).catch((err) => {});
<style scoped> activeIndex.value = index;
.hero-bg { }
background: linear-gradient(135deg, #001f3f, #0047ab); const slides = [
} {
:deep(.el-card) { src: "https://ai-public.mastergo.com/ai/img_res/a6c6b005094da8f76e79def3225b4ea0.jpg",
border: 1px solid rgba(0, 31, 63, 0.1); },
transition: all 0.3s ease; {
} src: "https://ai-public.mastergo.com/ai/img_res/cc20fdfc4e9bcd53c4f517b03036c8a2.jpg",
:deep(.el-scrollbar__wrap) { },
overflow-x: hidden; {
} src: "https://ai-public.mastergo.com/ai/img_res/40e648e87a974e8fe013b6f4b9b0ac2b.jpg",
:deep(.el-card.is-hover-shadow:hover) { },
box-shadow: 0 8px 16px rgba(0, 31, 63, 0.12); ];
transform: translateY(-2px); const quickLinks = [
} { icon: Document, title: "最新辟谣" },
:deep(.el-card.is-hover-shadow) { { icon: UserFilled, title: "举报入口" },
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); { icon: Lock, title: "安全提醒" },
} { icon: List, title: "政策法规" },
:deep(.el-card:hover) { { icon: Service, title: "在线咨询" },
border-color: rgba(0, 31, 63, 0.3); { icon: Bell, title: "举报中心" },
box-shadow: 0 12px 28px rgba(0, 31, 63, 0.15); { icon: Collection, title: "知识库" },
} ];
:deep(.el-card__body) { const sections = [
padding: 16px; {
} title: "专家解读",
:deep(.el-link.el-link--default:hover) { items: [
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; title: "辟谣专区",
} items: [
:deep(.service-swiper .swiper-button-prev) { "辟谣：喝热水可以预防新冠病毒感染？",
left: -20px; "谣言粉碎：5G基站会传播病毒",
} "假新闻核实：某食品添加剂致癌？",
:deep(.service-swiper .swiper-button-next) { "事实核查：网传特效药可治百病",
right: -20px; "辟谣：转发朋友圈可以赚钱？",
} "真相：某款保健品包治百病",
:deep(.service-swiper .swiper-button-disabled) { "谣言终结：吃某水果可预防癌症",
opacity: 0; "揭秘：网传养生方法的科学依据",
} ],
</style> },
{
\ No newline at end of file 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>
src/layout/wm.vue
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template> <template>
<div>12121</div> <div class="min-h-screen bg-gray-50">
<div class="mx-auto">
<!-- Hero区域 -->
<div class="relative h-[330px] mb-8 overflow-hidden">
<div class="absolute inset-0">
<img
src="https://ai-public.mastergo.com/ai/img_res/b69747ed7038cf3b7a5da874d0fed0ab.jpg"
class="w-full h-full object-cover object-top"
alt="banner"
/>
<div
class="absolute inset-0 bg-gradient-to-r from-blue-900/90 via-blue-900/70 to-transparent"
></div>
</div>
<div class="relative flex flex-col justify-center h-full px-12">
<!-- 顶部区域 -->
<div class="flex items-center justify-between mb-12">
<h2 class="text-5xl font-bold text-white max-w-xl leading-tight">
网民
<span
class="text-6xl"
style="font-family: 'STXingkai', 'KaiTi', cursive"
>有话说</span
>
</h2>
<div class="max-w-2xl bg-white/10 backdrop-blur-sm p-4 rounded-lg">
<p class="text-gray-100 text-sm leading-relaxed">
"倾听民声，解决民忧。让我们共同建设更美好的城市生活。各级政府部门要深入基层，了解群众所需所盼，及时回应群众关切，让互联网成为连接政府与群众的新桥梁。"
</p>
<p class="text-right mt-2 text-gray-200">—— 市长 陈志强</p>
</div>
</div>
<p class="text-xl text-gray-200 max-w-xl mb-6">
用真诚的态度和专业的服务，构建政民互动的新平台
</p>
<div class="flex items-center gap-4">
<el-input
v-model="searchQuery"
placeholder="搜索您关注的问题..."
class="!w-[360px] custom-input"
>
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
<button
class="flex items-center px-4 py-[9px] bg-blue-500 text-white hover:bg-blue-600 transition-colors !rounded-button whitespace-nowrap"
>
<el-icon class="mr-1"><Search /></el-icon>
<span>搜索</span>
</button>
<button
@click="iMessageClick"
class="flex items-center px-6 py-[9px] bg-white text-blue-800 hover:bg-blue-50 transition-colors !rounded-button whitespace-nowrap"
>
<span>我要留言</span>
<el-icon class="ml-1"><ArrowRight /></el-icon>
</button>
</div>
</div>
</div>
<router-view></router-view>
<!-- 页脚 -->
<footer class="footer-footer py-12 mt-8">
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-3 gap-8 mb-8">
<div>
<h4 class="font-bold text-lg mb-4 text-white">联系我们</h4>
<p class="text-gray-500">
地址：山西省太原市迎泽区迎泽大街 369 号
</p>
<p class="text-gray-500">电话：0755-12345678</p>
<p class="text-gray-500">邮箱：suggestions@gov.cn</p>
</div>
<div>
<h4 class="font-bold text-lg mb-4 text-white">主办单位</h4>
<p class="text-gray-500 mb-2">太原市互联网应急指挥和举报中心</p>
</div>
<div v-if="0">
<h4 class="font-bold text-lg mb-4 text-white">关注我们</h4>
<div class="flex space-x-4">
<a href="#" class="text-gray-500 hover:text-blue-600"
><el-icon><Position /></el-icon
></a>
<a href="#" class="text-gray-500 hover:text-blue-600"
><el-icon><Iphone /></el-icon
></a>
<a href="#" class="text-gray-600 hover:text-blue-600"
><el-icon><Message /></el-icon
></a>
</div>
</div>
</div>
<div class="border-t pt-8 text-center text-gray-500">
<p class="mb-2">
Copyright © 2024 太原市互联网应急指挥和举报中心 版权所有
</p>
<p>晋ICP备12345678号-1 | 晋公网安备 14010002000001号</p>
</div>
</div>
</footer>
</div>
</div>
</template> </template>
<script lang="ts" setup></script> <script lang="ts" setup>
\ No newline at end of file import { ref } from "vue";
import {
ChatDotRound,
Comment,
ArrowRight,
Search,
Tickets,
StarFilled,
Position,
Iphone,
Message,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
router.push({
path: "/wm/wmhome",
});
const searchQuery = ref("");
function iMessageClick() {
router.push({
path: "/wm/imessage",
});
}
</script>
<style scoped>
.footer-footer {
background-color: #1f2937;
}
.custom-input :deep(.el-input__wrapper) {
background-color: rgba(255, 255, 255, 0.9);
box-shadow: none;
border: none;
}
.custom-select :deep(.el-input__wrapper) {
background-color: rgba(255, 255, 255, 0.9);
box-shadow: none;
border: none;
}
.custom-input :deep(.el-input__inner) {
height: 42px;
}
.custom-select :deep(.el-input__inner) {
height: 42px;
}
</style>
src/router/index.ts
import { createRouter, createWebHistory } from "vue-router"; import { createRouter, createWebHistory } from "vue-router";
// 首页新闻
import NewsLayout from "../layout/news.vue";
import HomeView from "../views/home/home/HomeView.vue"; import HomeView from "../views/home/home/HomeView.vue";
import News from "../views/home/hotnews/News.vue"; import News from "../views/home/hotnews/News.vue";
import TaiyuanNews from "../views/home/tynews/TaiyuanNews.vue"; import TaiyuanNews from "../views/home/tynews/TaiyuanNews.vue";
import ShanxiNews from "../views/home/sxnews/ShanxiNews.vue"; 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 Jb from "../views/home/jb/Jb.vue";
import NewsDetail from "../views/home/hotnews/NewsDetail.vue";
import PyHome from "../views/py/PyHome.vue"; //辟谣
import NewsLayout from "../layout/news.vue"; import PyLayout from "../layout/py.vue";
import PyLayout from '../layout/py.vue'; import PyHome from "../views/py/home/PyHome.vue";
import WmLayout from '../layout/wm.vue'; import Authority from "../views/py/authority/Authority.vue";
import Rumor from "../views/py/rumor/Rumor.vue";
import Expert from "../views/py/expert/Expert.vue";
import Law from "../views/py/law/Law.vue";
import Reading from "../views/py/reading/Reading.vue";
//网名有话说
import WmLayout from "../layout/wm.vue";
import WmHome from "../views/wm/home/WmHome.vue";
import MessageList from "../views/wm/message/MessageList.vue";
import RecoverList from "../views/wm/recover/RecoverList.vue";
import MessageDetail from "../views/wm/message/MessageDetail.vue";
import RecoverDetail from "../views/wm/recover/RecoverDetail.vue";
import IMessage from "../views/wm/imessage/IMessage.vue";
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
...@@ -20,22 +38,45 @@ const router = createRouter({ ...@@ -20,22 +38,45 @@ const router = createRouter({
component: NewsLayout, component: NewsLayout,
children: [ children: [
{ {
name: "Home",
path: "/home/home", path: "/home/home",
component: HomeView, component: HomeView,
}, },
{ {
name: "News",
path: "/home/news", path: "/home/news",
component: News, component: News,
}, },
{ {
name: "TyNews",
path: "/home/tynews", path: "/home/tynews",
component: TaiyuanNews, component: TaiyuanNews,
}, },
{
name: "SxNews",
path: "/home/sxnews",
component: ShanxiNews,
},
{
name: "Announcements",
path: "/home/announcements",
component: Announcements,
},
{
name: "Jb",
path: "/home/jb",
component: Jb,
},
{
name: "NewsDetail",
path: "/home/newsdetail",
component: NewsDetail,
},
], ],
}, },
{ {
path: "/py", path: "/py",
name: "py", name: "/py/home",
component: PyLayout, component: PyLayout,
children: [ children: [
{ {
...@@ -43,16 +84,68 @@ const router = createRouter({ ...@@ -43,16 +84,68 @@ const router = createRouter({
path: "/py/pyhome", path: "/py/pyhome",
component: PyHome, component: PyHome,
}, },
{
name: "PyAuthority",
path: "/py/authority",
component: Authority,
},
{
name: "PyRumor",
path: "/py/rumor",
component: Rumor,
},
{
name: "PyExpert",
path: "/py/expert",
component: Expert,
},
{
name: "PyLaw",
path: "/py/law",
component: Law,
},
{
name: "PyReading",
path: "/py/reading",
component: Reading,
},
], ],
}, },
{ {
path: "/wm", path: "/wm",
name: "wm", name: "wm",
component: WmLayout, component: WmLayout,
children: [ children: [
{ {
path: "/wm/announcements", name: "WmHome",
component: Announcements, path: "/wm/wmhome",
component: WmHome,
},
{
name: "MessageList",
path: "/wm/messagelist",
component: MessageList,
},
{
name: "RecoverList",
path: "/wm/recoverlist",
component: RecoverList,
},
{
name: "MessageDetail",
path: "/wm/messagedetail",
component: MessageDetail,
},
{
name: "RecoverDetail",
path: "/wm/recoverdetail",
component: RecoverDetail,
},
{
name: "IMessage",
path: "/wm/imessage",
component: IMessage,
}, },
], ],
}, },
......
src/views/home/home/HomeView.vue
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
:modules="swiperModules" :modules="swiperModules"
:slides-per-view="1" :slides-per-view="1"
:loop="true" :loop="true"
:pagination="{ clickable: true }" :pagination="{ clickable: true, disableOnInteraction: false }"
:autoplay="{ delay: 3000 }" :autoplay="{ delay: 3000 }"
class="h-[400px] rounded-lg overflow-hidden" class="h-[400px] rounded-lg overflow-hidden"
> >
...@@ -243,6 +243,11 @@ import { ...@@ -243,6 +243,11 @@ import {
Search, Search,
Document, Document,
} from "@element-plus/icons-vue"; } from "@element-plus/icons-vue";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/autoplay";
import "swiper/css/navigation";
const router = useRouter(); const router = useRouter();
const swiperModules = [Pagination, Autoplay]; const swiperModules = [Pagination, Autoplay];
const searchQuery = ref(""); const searchQuery = ref("");
...@@ -251,13 +256,15 @@ const navItems = ["首页", "新闻热点", "太原新闻", "山西新闻", "通 ...@@ -251,13 +256,15 @@ const navItems = ["首页", "新闻热点", "太原新闻", "山西新闻", "通
const handleClick = (index: number, entry: any) => { const handleClick = (index: number, entry: any) => {
switch (index) { switch (index) {
case 0: case 0:
// router.push({ name: "PyHome" }); const pyHomePageUrl = router.resolve({ name: "PyHome" }).href;
const newPageUrl = router.resolve({ name: "PyHome" }).href; window.open(pyHomePageUrl, "_blank");
window.open(newPageUrl, "_blank");
break; break;
case 1: case 1:
router.push({ path: "/home/jb" });
break; break;
case 2: case 2:
const wmHomePageUrl = router.resolve({ name: "wm" }).href;
window.open(wmHomePageUrl, "_blank");
break; break;
} }
// 处理点击事件 // 处理点击事件
......
src/views/home/hotnews/News.vue
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
v-for="(news, index) in newsList" v-for="(news, index) in newsList"
:key="index" :key="index"
class="group p-4 flex items-start border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer" class="group p-4 flex items-start border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer"
@click="itemClick(news.id)"
> >
<div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg"> <div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg">
<img <img
...@@ -128,6 +129,8 @@ import { ...@@ -128,6 +129,8 @@ import {
Bell, Bell,
ArrowRight, ArrowRight,
} from "@element-plus/icons-vue"; } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
const currentPage = ref(1); const currentPage = ref(1);
const pageSize = ref(10); const pageSize = ref(10);
const total = ref(100); const total = ref(100);
...@@ -244,6 +247,15 @@ const announcements = ref([ ...@@ -244,6 +247,15 @@ const announcements = ref([
{ title: "2024 年度重点民生工程项目公示", tag: "公示", type: "info" }, { title: "2024 年度重点民生工程项目公示", tag: "公示", type: "info" },
{ title: "关于调整部分公交线路的通知", tag: "出行", type: "danger" }, { title: "关于调整部分公交线路的通知", tag: "出行", type: "danger" },
]); ]);
function itemClick(id: number) {
router.push({
path: "/home/newsdetail",
query: {
type: 1,
id: id,
},
});
}
</script> </script>
<style scoped> <style scoped>
.line-clamp-2 { .line-clamp-2 {
......
src/views/home/hotnews/NewsDetail.vue 0 → 100644
<template>
<div class="min-h-screen bg-gray-50">
<div class="w-[1440px] mx-auto px-0 py-5">
<div class="flex items-center text-sm text-gray-500 mb-2">
<router-link to="/home/news" class="text-gray-500 hover:text-blue-500"
>新闻热点</router-link
>
<el-icon class="mx-2"><ArrowRight /></el-icon>
<span class="text-gray-900">新闻详情</span>
</div>
<!-- 主要内容区 -->
<div class="grid grid-cols-3 gap-8">
<!-- 左侧主要新闻内容 -->
<div class="col-span-2 bg-white rounded-lg shadow-sm p-6">
<h1 class="text-3xl font-bold mb-4 text-black">
中国科技创新助力"双碳"目标实现 打造绿色发展新优势
</h1>
<div class="flex items-center text-gray-600 mb-6 space-x-4">
<div class="flex items-center">
<el-icon><User /></el-icon>
<span class="ml-1">李明远</span>
</div>
<div class="flex items-center">
<el-icon><Clock /></el-icon>
<span class="ml-1">2024 年 1 月 15 日 14:30</span>
</div>
<div class="flex items-center">
<el-icon><View /></el-icon>
<span class="ml-1">阅读 2,387</span>
</div>
</div>
<div class="prose max-w-none">
<img
:src="mainImage"
alt="科技创新"
class="w-full h-[400px] object-cover object-center rounded-lg mb-6"
/>
<p class="text-lg leading-relaxed mb-4 text-black">
近日，国务院新闻办公室发布《中国应对气候变化的政策与行动》白皮书，全面介绍中国应对气候变化的最新政策措施、行动成效和基本立场。白皮书指出，中国将秉持人类命运共同体理念，为应对全球气候变化作出更大贡献。
</p>
<p class="text-lg leading-relaxed mb-4 text-black">
在"双碳"目标引领下，中国正在加快构建清洁低碳安全高效的能源体系。2023年前三季度，我国可再生能源发电装机规模持续扩大，光伏发电新增装机超过
8000 万千瓦，风电新增装机超过 2500 万千瓦。
</p>
<img
:src="contentImage1"
alt="可再生能源"
class="w-full h-[300px] object-cover object-center rounded-lg my-6"
/>
<p class="text-lg leading-relaxed mb-4 text-black">
科技创新在推动绿色低碳发展中发挥着关键作用。我国在氢能、储能、智能电网等领域取得重要突破，新型电力系统建设稳步推进，能源技术创新能力显著增强。
</p>
</div>
</div>
<!-- 右侧边栏 -->
<div class="space-y-6">
<!-- 热点新闻 -->
<div class="bg-white rounded-lg shadow-sm p-6">
<h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="text-red-500 mr-2"><Star /></el-icon>
热点新闻
</h2>
<div class="space-y-4">
<div
v-for="(item, index) in hotNews"
:key="index"
class="group cursor-pointer"
@click="itemClicks(item.id)"
>
<div class="relative h-40 mb-2 overflow-hidden rounded-lg">
<img
:src="item.image"
:alt="item.title"
class="w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-300"
/>
</div>
<h3
class="text-base font-medium group-hover:text-blue-600 text-black"
>
{{ item.title }}
</h3>
<p class="text-sm text-gray-500">{{ item.date }}</p>
</div>
</div>
</div>
<!-- 本地新闻 -->
<div class="bg-white rounded-lg shadow-sm p-6 text-black">
<h2 class="text-xl font-bold mb-4 flex items-center">
<el-icon class="text-blue-500 mr-2"><Location /></el-icon>
本地新闻
</h2>
<div class="space-y-4">
<div
v-for="(item, index) in localNews"
:key="index"
class="flex items-start space-x-3 group cursor-pointer"
@click="itemClicks(item.id)"
>
<div class="flex-shrink-0 w-20 h-20 overflow-hidden rounded">
<img
:src="item.image"
:alt="item.title"
class="w-full h-full object-cover object-center"
/>
</div>
<div>
<h3 class="text-sm font-medium group-hover:text-blue-600">
{{ item.title }}
</h3>
<p class="text-xs text-gray-500 mt-1">{{ item.date }}</p>
</div>
</div>
</div>
</div>
<!-- 通知公告 -->
<div class="bg-white rounded-lg shadow-sm p-6 text-black">
<h2 class="text-xl font-bold mb-4 flex items-center">
<el-icon class="text-yellow-500 mr-2"><Bell /></el-icon>
通知公告
</h2>
<div class="space-y-3">
<div
v-for="(notice, index) in notices"
:key="index"
class="flex items-center space-x-2 group cursor-pointer"
>
<el-icon><Document /></el-icon>
<span class="text-sm group-hover:text-blue-600">{{
notice.title
}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import {
User,
Clock,
View,
Star,
Location,
Bell,
Document,
ArrowRight,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
const mainImage =
"https://ai-public.mastergo.com/ai/img_res/fc0c8191fe99a188a31adcb3a2740d5c.jpg";
const contentImage1 =
"https://ai-public.mastergo.com/ai/img_res/fa798b4a2d6f1644a8e92055a99ebd18.jpg";
const hotNews = ref([
{
title: "新能源汽车产业链全面布局，本地企业创新发展提速",
image:
"https://ai-public.mastergo.com/ai/img_res/33a919df2dcf2f3a8273be6a047741d9.jpg",
date: "2024-01-15",
},
{
title: "智慧城市建设再添新章，5G 技术赋能城市治理",
image:
"https://ai-public.mastergo.com/ai/img_res/c88855fc16b1e5c2a4d2dc275b8160f2.jpg",
date: "2024-01-14",
},
]);
const localNews = ref([
{
title: "我市举办 2024 年科技创新成果展",
image:
"https://ai-public.mastergo.com/ai/img_res/e0c468c5b9241d5d19cadc683c030bbd.jpg",
date: "2024-01-15",
},
{
title: "本地高新技术企业突破 500 家",
image:
"https://ai-public.mastergo.com/ai/img_res/cb9da54c9a1ba3bdf71ba9abcf8cee40.jpg",
date: "2024-01-14",
},
{
title: "首届数字经济发展论坛成功举办",
image:
"https://ai-public.mastergo.com/ai/img_res/09e109cd6473f1976e4949acc619b480.jpg",
date: "2024-01-13",
},
]);
const notices = ref([
{
title: "关于组织申报 2024 年度科技创新项目的通知",
},
{
title: "2024 年第一季度高新技术企业认定工作启动",
},
{
title: "关于开展科技型中小企业评价工作的通知",
},
{
title: "2024 年科技创新券申领指南",
},
{
title: "关于征集科技创新政策建议的公告",
},
]);
function itemClicks(id: number) {
router.push({
path: "/home/newsdetail",
query: {
id: id,
},
});
}
</script>
<style scoped>
.prose img {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.prose p {
margin-bottom: 1.5rem;
line-height: 1.75;
}
</style>
src/views/home/jb/Jb.vue 0 → 100644
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="min-h-screen bg-gray-50">
<div class="w-[1440px] mx-auto px-0 py-8">
<!-- 面包屑导航 -->
<div class="flex items-center text-sm text-gray-500 mb-5">
<router-link to="/" class="text-gray-500 hover:text-blue-500"
>首页</router-link
>
<el-icon class="mx-2"><ArrowRight /></el-icon>
<span class="text-gray-900">留言列表</span>
</div>
<!-- 页面标题 -->
<div class="mb-5">
<h1 class="text-2xl font-bold mb-2 text-black">
涉网络暴力有害信息举报专区
</h1>
<div class="flex items-center justify-between">
<span class="text-gray-500 text-sm">2023年12月20日 14:43</span>
<!-- <div class="flex gap-4">
<el-button
type="primary"
class="!rounded-button whitespace-nowrap"
size="small"
>分享</el-button
>
<el-button
type="success"
class="!rounded-button whitespace-nowrap"
size="small"
>收藏</el-button
>
</div> -->
</div>
</div>
<!-- 主要内容区域 -->
<div class="bg-white rounded-lg shadow-sm p-8">
<!-- 举报入口区域 -->
<div class="mb-12">
<h2 class="text-xl font-bold mb-6 text-black">举报入口</h2>
<div class="grid grid-cols-3 gap-8">
<!-- 中央网信办举报入口 -->
<div
class="border rounded-lg p-6 flex flex-col items-center justify-center hover:shadow-md transition-shadow bg-gray-50"
@click="goUrl(1)"
>
<img
src="https://ai-public.mastergo.com/ai/img_res/57ebde68f473e914c107e3a025660439.jpg"
alt="中央网信办logo"
class="w-24 h-24 mb-4 object-contain"
/>
<h3 class="text-lg font-medium text-red-600 mb-2">中央网信办</h3>
<p class="text-gray-600 text-sm text-center">
互联网违法和不良信息举报入口
</p>
</div>
<!-- 山西省举报入口 -->
<div
class="border rounded-lg p-6 flex flex-col items-center justify-center hover:shadow-md transition-shadow bg-gray-50"
@click="goUrl(2)"
>
<img
src="https://ai-public.mastergo.com/ai/img_res/7b97bd66edf931fe17054d9f3db69896.jpg"
alt="山西省logo"
class="w-24 h-24 mb-4 object-contain"
/>
<h3 class="text-lg font-medium text-red-600 mb-2">
山西省举报中心
</h3>
<p class="text-gray-600 text-sm text-center">
山西省互联网违法和不良信息举报入口
</p>
</div>
<!-- 太原市举报入口 -->
<div
class="border rounded-lg p-6 flex flex-col items-center justify-center hover:shadow-md transition-shadow bg-gray-50"
@click="goUrl(3)"
>
<img
src="https://ai-public.mastergo.com/ai/img_res/7b5a4b53e643dc61aa084b4a45069db3.jpg"
alt="太原市logo"
class="w-24 h-24 mb-4 object-contain"
/>
<h3 class="text-lg font-medium text-red-600 mb-2">
太原市举报平台
</h3>
<p class="text-gray-600 text-sm text-center">
太原市互联网违法和不良信息举报入口
</p>
</div>
</div>
</div>
<!-- 举报须知与联系方式 -->
<div class="grid grid-cols-2 gap-8">
<!-- 左侧举报须知 -->
<div class="space-y-6">
<h2 class="text-xl font-bold mb-6 text-black">网上举报须知</h2>
<div>
<h3 class="font-medium mb-4 text-black">一、受理举报范围</h3>
<ol class="list-decimal list-inside space-y-2 text-gray-700">
<li>反对宪法所确定的基本原则的；</li>
<li>
危害国家安全、泄露国家秘密、颠覆国家政权、破坏国家统一的；
</li>
<li>损害国家荣誉和利益的；</li>
<li>煽动民族仇恨、民族歧视，破坏民族团结的；</li>
<li>破坏国家宗教政策，宣扬邪教和封建迷信的；</li>
<li>散布谣言，扰乱社会秩序，破坏社会稳定的；</li>
<li>散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；</li>
<li>侮辱或者诽谤他人，侵害他人合法权益的；</li>
<li>含有法律、行政法规禁止的其他内容的。</li>
</ol>
</div>
<div>
<h3 class="font-medium mb-4">二、注意事项</h3>
<ol class="list-decimal list-inside space-y-2 text-gray-700">
<li>请您自觉遵守中华人民共和国宪法和法律。</li>
<li>举报应当实事求是，应对举报内容的真实性、客观性负责。</li>
<li>请如实提供违法举报信息（附链接地址、截图等）。</li>
<li>可以选择匿名举报，如实名举报，请留下有效联系方式。</li>
<li>请不要重复举报。</li>
</ol>
</div>
</div>
<!-- 右侧联系方式 -->
<div class="space-y-8 border-l pl-8">
<h2 class="text-xl font-bold mb-6 text-black">联系方式</h2>
<div class="space-y-8">
<section>
<h3 class="font-medium mb-4 text-black">
太原市互联网信息办公室
</h3>
<ul class="space-y-2 text-gray-700">
<li class="flex items-center">
<el-icon class="mr-2"><Phone /></el-icon>
举报电话：0351-8222236
</li>
<li class="flex items-center">
<el-icon class="mr-2"><Message /></el-icon>
举报传真：0351-8222234
</li>
<li class="flex items-center">
<el-icon class="mr-2"><Message /></el-icon>
举报邮箱：tyhlwjb@163.com
</li>
</ul>
</section>
<section>
<h3 class="font-medium mb-4 text-black">太原新闻网</h3>
<ul class="space-y-2 text-gray-700">
<li class="flex items-center">
<el-icon class="mr-2"><Phone /></el-icon>
举报电话：0351-8222094
</li>
<li class="flex items-center">
<el-icon class="mr-2"><Message /></el-icon>
举报邮箱：news1950@126.com
</li>
</ul>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ElButton, ElIcon } from "element-plus";
import { Phone, Message, ArrowRight } from "@element-plus/icons-vue";
function goUrl(type: number) {
switch (type) {
case 1: //中央网信办
window.open("https://www.baidu.com/");
break;
case 2: //山西省举报中心
window.open("https://www.tynews.cn/");
break;
case 3: //太原市举报平台
window.open("https://www.tynews.cn/");
break;
}
}
</script>
<style scoped>
.min-h-screen {
min-height: 1024px;
}
</style>
src/views/py/authority/Authority.vue 0 → 100644
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="min-h-screen bg-gray-50">
<div class="container mx-auto px-4 py-8 w-[1440px]">
<div class="flex gap-6">
<div class="flex-1">
<div class="bg-white rounded-lg shadow-sm">
<div
v-for="(news, index) in newsList"
:key="index"
class="group p-4 flex items-start border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer"
>
<div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg">
<img
:src="news.image"
:alt="news.title"
class="w-full h-full object-cover"
/>
</div>
<div class="flex-grow px-6">
<h2
class="text-lg font-semibold mb-2 group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ news.title }}
</h2>
<p class="text-gray-600 text-sm line-clamp-2">
{{ news.summary }}
</p>
<div class="mt-3 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ news.time }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Document /></el-icon>
{{ news.source }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ news.views }}
</span>
</div>
</div>
<div class="w-24 flex-shrink-0 text-right">
<el-tag
:type="news.category.type"
size="small"
class="whitespace-nowrap"
>
{{ news.category.name }}
</el-tag>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:total="total"
:page-sizes="[10, 20, 30, 40]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
<div class="w-80 flex-shrink-0 space-y-6">
<!-- 热点新闻 -->
<div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-red-500"><Star /></el-icon>
热点新闻
</h2>
<div class="space-y-4">
<div
v-for="(item, index) in hotNews"
:key="index"
class="group cursor-pointer"
>
<div
class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ item.title }}
</div>
<div class="text-xs text-gray-500 mt-1">
{{ item.views }} 阅读
</div>
</div>
</div>
</div>
<!-- 本地新闻 -->
<div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-blue-500"><Location /></el-icon>
本地新闻
</h2>
<div class="space-y-4">
<div
v-for="(item, index) in localNews"
:key="index"
class="group cursor-pointer"
>
<div class="h-32 mb-2 overflow-hidden rounded-lg">
<img
:src="item.image"
:alt="item.title"
class="w-full h-full object-cover"
/>
</div>
<div
class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ item.title }}
</div>
</div>
</div>
</div>
<!-- 通知公告 -->
<div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-orange-500"><Bell /></el-icon>
通知公告
</h2>
<div class="space-y-3">
<div
v-for="(item, index) in announcements"
:key="index"
class="flex items-center space-x-2 group cursor-pointer"
>
<el-tag size="small" :type="item.type">{{ item.tag }}</el-tag>
<span
class="text-sm group-hover:text-blue-600 flex-1 line-clamp-1 text-black"
>{{ item.title }}</span
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import {
Clock,
Document,
View,
Star,
Location,
Bell,
ArrowRight,
} from "@element-plus/icons-vue";
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);
const handleSizeChange = (val: number) => {
pageSize.value = val;
};
const handleCurrentChange = (val: number) => {
currentPage.value = val;
};
const newsList = ref([
{
title: "国务院常务会议：部署进一步优化营商环境的政策措施",
summary:
"会议强调要持续优化营商环境，激发市场主体活力，促进经济持续健康发展。会议通过了《关于进一步优化营商环境的实施意见》，提出了一系列具体措施。",
image:
"https://ai-public.mastergo.com/ai/img_res/7008561e2575928d48be3eb6abb45ed5.jpg",
time: "2024-01-15 14:30",
source: "新华网",
views: "12,458",
category: { name: "时政", type: "danger" },
},
{
title: "科技创新引领未来：量子计算研究获重大突破",
summary:
"中国科学家在量子计算领域取得重大突破，成功实现了72量子比特的量子优势验证，为未来量子计算的实用化奠定了重要基础。",
image:
"https://ai-public.mastergo.com/ai/img_res/2e87bb273492cc07fca2c54839b12c72.jpg",
time: "2024-01-15 10:15",
source: "科技日报",
views: "8,932",
category: { name: "科技", type: "primary" },
},
{
title: "全国医疗改革新政策出台：提升基层医疗服务能力",
summary:
"国家卫健委发布新政策，加强基层医疗机构建设，推进分级诊疗制度落实，提高基层医疗服务水平，让群众就医更便利。",
image:
"https://ai-public.mastergo.com/ai/img_res/4e1300130f5ddc4b058201ce0863e853.jpg",
time: "2024-01-15 09:00",
source: "健康时报",
views: "15,674",
category: { name: "民生", type: "success" },
},
{
title: "2024年春节消费预测：文旅市场将迎来开门红",
summary:
"随着假期临近，文旅部门预计今年春节期间国内旅游人次将突破4亿，旅游收入有望超过5000亿元，文旅市场将迎来强劲复苏。",
image:
"https://ai-public.mastergo.com/ai/img_res/00343eaf70fed629fbaa7ab9f692eb8d.jpg",
time: "2024-01-14 16:45",
source: "经济观察报",
views: "9,876",
category: { name: "财经", type: "warning" },
},
{
title: "教育部发布新规：加强中小学生心理健康教育",
summary:
"教育部近日印发《关于加强中小学生心理健康教育的指导意见》，要求各地建立健全学生心理健康教育体系，预防和干预学生心理问题。",
image:
"https://ai-public.mastergo.com/ai/img_res/a2b931119f927fa4e1b42724d9f274ef.jpg",
time: "2024-01-14 14:20",
source: "中国教育报",
views: "11,234",
category: { name: "教育", type: "info" },
},
{
title: "教育部发布新规：加强中小学生心理健康教育",
summary:
"教育部近日印发《关于加强中小学生心理健康教育的指导意见》，要求各地建立健全学生心理健康教育体系，预防和干预学生心理问题。",
image:
"https://ai-public.mastergo.com/ai/img_res/a2b931119f927fa4e1b42724d9f274ef.jpg",
time: "2024-01-14 14:20",
source: "中国教育报",
views: "11,234",
category: { name: "教育", type: "info" },
},
{
title: "教育部发布新规：加强中小学生心理健康教育",
summary:
"教育部近日印发《关于加强中小学生心理健康教育的指导意见》，要求各地建立健全学生心理健康教育体系，预防和干预学生心理问题。",
image:
"https://ai-public.mastergo.com/ai/img_res/a2b931119f927fa4e1b42724d9f274ef.jpg",
time: "2024-01-14 14:20",
source: "中国教育报",
views: "11,234",
category: { name: "教育", type: "info" },
},
]);
const hotNews = ref([
{
title: "AI 技术在医疗领域取得重大突破：精准诊断率提升 35%",
views: "28.5万",
},
{ title: "2024 全球经济展望：新兴市场或成增长主引擎", views: "25.3万" },
{ title: "环保新政出台：到 2025 年可再生能源占比将达 30%", views: "22.1万" },
{
title: "第五代移动通信技术实现全域覆盖，用户体验显著提升",
views: "19.8万",
},
{
title: "首届全球数字经济博览会将在深圳举办，聚焦前沿科技",
views: "18.2万",
},
]);
const localNews = ref([
{
title: "城市地铁 12 号线正式开通，打通南北交通大动脉",
image:
"https://ai-public.mastergo.com/ai/img_res/3d43624529823eeaf292c07dcd59244d.jpg",
},
{
title: "市中心文化广场改造完工，将举办系列文化活动",
image:
"https://ai-public.mastergo.com/ai/img_res/449f75b182bd83a315e2e9e85d2b33b7.jpg",
},
]);
const announcements = ref([
{
title: "关于举办 2024 年春季人才招聘会的通知",
tag: "招聘",
type: "success",
},
{ title: "2024 年度市政府工作报告公开征求意见", tag: "公示", type: "info" },
{ title: "关于开展春节期间文化惠民活动的通知", tag: "活动", type: "warning" },
{ title: "2024 年度重点民生工程项目公示", tag: "公示", type: "info" },
{ title: "关于调整部分公交线路的通知", tag: "出行", type: "danger" },
]);
</script>
<style scoped>
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-1 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
src/views/py/expert/Expert.vue 0 → 100644
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="min-h-screen bg-gray-50">
<div class="container mx-auto px-4 py-8 w-[1440px]">
<div class="flex gap-6">
<div class="flex-1">
<div class="bg-white rounded-lg shadow-sm">
<div
v-for="(news, index) in newsList"
:key="index"
class="group p-4 flex items-start border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer"
>
<div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg">
<img
:src="news.image"
:alt="news.title"
class="w-full h-full object-cover"
/>
</div>
<div class="flex-grow px-6">
<h2
class="text-lg font-semibold mb-2 group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ news.title }}
</h2>
<p class="text-gray-600 text-sm line-clamp-2">
{{ news.summary }}
</p>
<div class="mt-3 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ news.time }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Document /></el-icon>
{{ news.source }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ news.views }}
</span>
</div>
</div>
<div class="w-24 flex-shrink-0 text-right">
<el-tag
:type="news.category.type"
size="small"
class="whitespace-nowrap"
>
{{ news.category.name }}
</el-tag>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:total="total"
:page-sizes="[10, 20, 30, 40]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
<div class="w-80 flex-shrink-0 space-y-6">
<!-- 热点新闻 -->
<div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-red-500"><Star /></el-icon>
热点新闻
</h2>
<div class="space-y-4">
<div
v-for="(item, index) in hotNews"
:key="index"
class="group cursor-pointer"
>
<div
class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ item.title }}
</div>
<div class="text-xs text-gray-500 mt-1">
{{ item.views }} 阅读
</div>
</div>
</div>
</div>
<!-- 本地新闻 -->
<div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-blue-500"><Location /></el-icon>
本地新闻
</h2>
<div class="space-y-4">
<div
v-for="(item, index) in localNews"
:key="index"
class="group cursor-pointer"
>
<div class="h-32 mb-2 overflow-hidden rounded-lg">
<img
:src="item.image"
:alt="item.title"
class="w-full h-full object-cover"
/>
</div>
<div
class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ item.title }}
</div>
</div>
</div>
</div>
<!-- 通知公告 -->
<div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-orange-500"><Bell /></el-icon>
通知公告
</h2>
<div class="space-y-3">
<div
v-for="(item, index) in announcements"
:key="index"
class="flex items-center space-x-2 group cursor-pointer"
>
<el-tag size="small" :type="item.type">{{ item.tag }}</el-tag>
<span
class="text-sm group-hover:text-blue-600 flex-1 line-clamp-1 text-black"
>{{ item.title }}</span
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import {
Clock,
Document,
View,
Star,
Location,
Bell,
ArrowRight,
} from "@element-plus/icons-vue";
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);
const handleSizeChange = (val: number) => {
pageSize.value = val;
};
const handleCurrentChange = (val: number) => {
currentPage.value = val;
};
const newsList = ref([
{
title: "国务院常务会议：部署进一步优化营商环境的政策措施",
summary:
"会议强调要持续优化营商环境，激发市场主体活力，促进经济持续健康发展。会议通过了《关于进一步优化营商环境的实施意见》，提出了一系列具体措施。",
image:
"https://ai-public.mastergo.com/ai/img_res/7008561e2575928d48be3eb6abb45ed5.jpg",
time: "2024-01-15 14:30",
source: "新华网",
views: "12,458",
category: { name: "时政", type: "danger" },
},
{
title: "科技创新引领未来：量子计算研究获重大突破",
summary:
"中国科学家在量子计算领域取得重大突破，成功实现了72量子比特的量子优势验证，为未来量子计算的实用化奠定了重要基础。",
image:
"https://ai-public.mastergo.com/ai/img_res/2e87bb273492cc07fca2c54839b12c72.jpg",
time: "2024-01-15 10:15",
source: "科技日报",
views: "8,932",
category: { name: "科技", type: "primary" },
},
{
title: "全国医疗改革新政策出台：提升基层医疗服务能力",
summary:
"国家卫健委发布新政策，加强基层医疗机构建设，推进分级诊疗制度落实，提高基层医疗服务水平，让群众就医更便利。",
image:
"https://ai-public.mastergo.com/ai/img_res/4e1300130f5ddc4b058201ce0863e853.jpg",
time: "2024-01-15 09:00",
source: "健康时报",
views: "15,674",
category: { name: "民生", type: "success" },
},
{
title: "2024年春节消费预测：文旅市场将迎来开门红",
summary:
"随着假期临近，文旅部门预计今年春节期间国内旅游人次将突破4亿，旅游收入有望超过5000亿元，文旅市场将迎来强劲复苏。",
image:
"https://ai-public.mastergo.com/ai/img_res/00343eaf70fed629fbaa7ab9f692eb8d.jpg",
time: "2024-01-14 16:45",
source: "经济观察报",
views: "9,876",
category: { name: "财经", type: "warning" },
},
{
title: "教育部发布新规：加强中小学生心理健康教育",
summary:
"教育部近日印发《关于加强中小学生心理健康教育的指导意见》，要求各地建立健全学生心理健康教育体系，预防和干预学生心理问题。",
image:
"https://ai-public.mastergo.com/ai/img_res/a2b931119f927fa4e1b42724d9f274ef.jpg",
time: "2024-01-14 14:20",
source: "中国教育报",
views: "11,234",
category: { name: "教育", type: "info" },
},
{
title: "教育部发布新规：加强中小学生心理健康教育",
summary:
"教育部近日印发《关于加强中小学生心理健康教育的指导意见》，要求各地建立健全学生心理健康教育体系，预防和干预学生心理问题。",
image:
"https://ai-public.mastergo.com/ai/img_res/a2b931119f927fa4e1b42724d9f274ef.jpg",
time: "2024-01-14 14:20",
source: "中国教育报",
views: "11,234",
category: { name: "教育", type: "info" },
},
{
title: "教育部发布新规：加强中小学生心理健康教育",
summary:
"教育部近日印发《关于加强中小学生心理健康教育的指导意见》，要求各地建立健全学生心理健康教育体系，预防和干预学生心理问题。",
image:
"https://ai-public.mastergo.com/ai/img_res/a2b931119f927fa4e1b42724d9f274ef.jpg",
time: "2024-01-14 14:20",
source: "中国教育报",
views: "11,234",
category: { name: "教育", type: "info" },
},
]);
const hotNews = ref([
{
title: "AI 技术在医疗领域取得重大突破：精准诊断率提升 35%",
views: "28.5万",
},
{ title: "2024 全球经济展望：新兴市场或成增长主引擎", views: "25.3万" },
{ title: "环保新政出台：到 2025 年可再生能源占比将达 30%", views: "22.1万" },
{
title: "第五代移动通信技术实现全域覆盖，用户体验显著提升",
views: "19.8万",
},
{
title: "首届全球数字经济博览会将在深圳举办，聚焦前沿科技",
views: "18.2万",
},
]);
const localNews = ref([
{
title: "城市地铁 12 号线正式开通，打通南北交通大动脉",
image:
"https://ai-public.mastergo.com/ai/img_res/3d43624529823eeaf292c07dcd59244d.jpg",
},
{
title: "市中心文化广场改造完工，将举办系列文化活动",
image:
"https://ai-public.mastergo.com/ai/img_res/449f75b182bd83a315e2e9e85d2b33b7.jpg",
},
]);
const announcements = ref([
{
title: "关于举办 2024 年春季人才招聘会的通知",
tag: "招聘",
type: "success",
},
{ title: "2024 年度市政府工作报告公开征求意见", tag: "公示", type: "info" },
{ title: "关于开展春节期间文化惠民活动的通知", tag: "活动", type: "warning" },
{ title: "2024 年度重点民生工程项目公示", tag: "公示", type: "info" },
{ title: "关于调整部分公交线路的通知", tag: "出行", type: "danger" },
]);
</script>
<style scoped>
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-1 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
src/views/py/PyHome.vue → src/views/py/home/PyHome.vue
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 --> <!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template> <template>
<div class="w-[1440px] mx-auto"> <div class="mx-auto bg-gray-200">
<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 text-black">
全国网络辟谣联动机制第三次全体会议召开 全国网络辟谣联动机制第三次全体会议召开
</h2> </h2>
<p class="text-gray-600 mb-4"> <p class="text-gray-600 mb-4">
...@@ -15,15 +15,21 @@ ...@@ -15,15 +15,21 @@
:modules="swiperModules" :modules="swiperModules"
:pagination="{ clickable: true }" :pagination="{ clickable: true }"
:navigation="true" :navigation="true"
:autoplay="{ delay: 3000 }" :autoplay="{ delay: 3000, disableOnInteraction: false }"
class="w-full h-full" class="w-full h-full"
> >
<swiper-slide v-for="(slide, index) in slides" :key="index"> <swiper-slide v-for="(slide, index) in slides" :key="index">
<el-image :src="slide.src" fit="cover" class="w-full h-full" /> <el-image
:src="slide.src"
fit="cover"
class="w-full h-full object-cover"
/>
<!-- 使用 el-image 组件显示图片，并设置图片填充方式为覆盖 -->
</swiper-slide> </swiper-slide>
</swiper> </swiper>
</div> </div>
<div class="w-1/3 grid grid-cols-1 gap-3 h-[450px] overflow-y-auto">
<div class="w-1/3 flex flex-col gap-2">
<el-card <el-card
v-for="(item, index) in quickLinks" v-for="(item, index) in quickLinks"
:key="index" :key="index"
...@@ -31,12 +37,12 @@ ...@@ -31,12 +37,12 @@
shadow="hover" shadow="hover"
> >
<div <div
class="flex items-center gap-4 p-3 h-16 bg-gradient-to-r from-blue-50 to-white rounded-lg" class="flex items-center gap-4 p-2 bg-gradient-to-r from-blue-50 to-white rounded-lg"
> >
<el-icon :size="32" class="text-blue-600"> <el-icon :size="24" class="text-blue-600">
<component :is="item.icon" /> <component :is="item.icon" />
</el-icon> </el-icon>
<h4 class="font-bold text-lg text-blue-900 flex items-center"> <h4 class="font-bold text-base text-blue-900 flex items-center">
{{ item.title }} {{ item.title }}
</h4> </h4>
</div> </div>
...@@ -120,6 +126,10 @@ import { ...@@ -120,6 +126,10 @@ import {
Bell, Bell,
Collection, Collection,
} from "@element-plus/icons-vue"; } from "@element-plus/icons-vue";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/autoplay";
import "swiper/css/navigation";
const activeIndex = ref("0"); const activeIndex = ref("0");
const swiperModules = [Pagination, Navigation, Autoplay]; const swiperModules = [Pagination, Navigation, Autoplay];
const menuItems = [ const menuItems = [
...@@ -270,16 +280,17 @@ const serviceCards = [ ...@@ -270,16 +280,17 @@ const serviceCards = [
border-radius: 50%; border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
color: #001f3f; color: #001f3f;
/* left: 95%; */
} }
:deep(.service-swiper .swiper-button-prev:after), :deep(.service-swiper .swiper-button-prev:after),
:deep(.service-swiper .swiper-button-next:after) { :deep(.service-swiper .swiper-button-next:after) {
font-size: 16px; font-size: 16px;
} }
:deep(.service-swiper .swiper-button-prev) { :deep(.service-swiper .swiper-button-prev) {
left: -20px; /* left: -20px; */
} }
:deep(.service-swiper .swiper-button-next) { :deep(.service-swiper .swiper-button-next) {
right: -20px; /* right: -20px; */
} }
:deep(.service-swiper .swiper-button-disabled) { :deep(.service-swiper .swiper-button-disabled) {
opacity: 0; opacity: 0;
......
src/views/py/law/Law.vue 0 → 100644
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="min-h-screen bg-gray-50">
<div class="container mx-auto px-4 py-8 w-[1440px]">
<div class="flex gap-6">
<div class="flex-1">
<div class="bg-white rounded-lg shadow-sm">
<div
v-for="(news, index) in newsList"
:key="index"
class="group p-4 flex items-start border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer"
>
<div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg">
<img
:src="news.image"
:alt="news.title"
class="w-full h-full object-cover"
/>
</div>
<div class="flex-grow px-6">
<h2
class="text-lg font-semibold mb-2 group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ news.title }}
</h2>
<p class="text-gray-600 text-sm line-clamp-2">
{{ news.summary }}
</p>
<div class="mt-3 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ news.time }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Document /></el-icon>
{{ news.source }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ news.views }}
</span>
</div>
</div>
<div class="w-24 flex-shrink-0 text-right">
<el-tag
:type="news.category.type"
size="small"
class="whitespace-nowrap"
>
{{ news.category.name }}
</el-tag>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:total="total"
:page-sizes="[10, 20, 30, 40]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
<div class="w-80 flex-shrink-0 space-y-6">
<!-- 热点新闻 -->
<div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-red-500"><Star /></el-icon>
热点新闻
</h2>
<div class="space-y-4">
<div
v-for="(item, index) in hotNews"
:key="index"
class="group cursor-pointer"
>
<div
class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ item.title }}
</div>
<div class="text-xs text-gray-500 mt-1">
{{ item.views }} 阅读
</div>
</div>
</div>
</div>
<!-- 本地新闻 -->
<div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-blue-500"><Location /></el-icon>
本地新闻
</h2>
<div class="space-y-4">
<div
v-for="(item, index) in localNews"
:key="index"
class="group cursor-pointer"
>
<div class="h-32 mb-2 overflow-hidden rounded-lg">
<img
:src="item.image"
:alt="item.title"
class="w-full h-full object-cover"
/>
</div>
<div
class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ item.title }}
</div>
</div>
</div>
</div>
<!-- 通知公告 -->
<div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-orange-500"><Bell /></el-icon>
通知公告
</h2>
<div class="space-y-3">
<div
v-for="(item, index) in announcements"
:key="index"
class="flex items-center space-x-2 group cursor-pointer"
>
<el-tag size="small" :type="item.type">{{ item.tag }}</el-tag>
<span
class="text-sm group-hover:text-blue-600 flex-1 line-clamp-1 text-black"
>{{ item.title }}</span
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import {
Clock,
Document,
View,
Star,
Location,
Bell,
ArrowRight,
} from "@element-plus/icons-vue";
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);
const handleSizeChange = (val: number) => {
pageSize.value = val;
};
const handleCurrentChange = (val: number) => {
currentPage.value = val;
};
const newsList = ref([
{
title: "国务院常务会议：部署进一步优化营商环境的政策措施",
summary:
"会议强调要持续优化营商环境，激发市场主体活力，促进经济持续健康发展。会议通过了《关于进一步优化营商环境的实施意见》，提出了一系列具体措施。",
image:
"https://ai-public.mastergo.com/ai/img_res/7008561e2575928d48be3eb6abb45ed5.jpg",
time: "2024-01-15 14:30",
source: "新华网",
views: "12,458",
category: { name: "时政", type: "danger" },
},
{
title: "科技创新引领未来：量子计算研究获重大突破",
summary:
"中国科学家在量子计算领域取得重大突破，成功实现了72量子比特的量子优势验证，为未来量子计算的实用化奠定了重要基础。",
image:
"https://ai-public.mastergo.com/ai/img_res/2e87bb273492cc07fca2c54839b12c72.jpg",
time: "2024-01-15 10:15",
source: "科技日报",
views: "8,932",
category: { name: "科技", type: "primary" },
},
{
title: "全国医疗改革新政策出台：提升基层医疗服务能力",
summary:
"国家卫健委发布新政策，加强基层医疗机构建设，推进分级诊疗制度落实，提高基层医疗服务水平，让群众就医更便利。",
image:
"https://ai-public.mastergo.com/ai/img_res/4e1300130f5ddc4b058201ce0863e853.jpg",
time: "2024-01-15 09:00",
source: "健康时报",
views: "15,674",
category: { name: "民生", type: "success" },
},
{
title: "2024年春节消费预测：文旅市场将迎来开门红",
summary:
"随着假期临近，文旅部门预计今年春节期间国内旅游人次将突破4亿，旅游收入有望超过5000亿元，文旅市场将迎来强劲复苏。",
image:
"https://ai-public.mastergo.com/ai/img_res/00343eaf70fed629fbaa7ab9f692eb8d.jpg",
time: "2024-01-14 16:45",
source: "经济观察报",
views: "9,876",
category: { name: "财经", type: "warning" },
},
{
title: "教育部发布新规：加强中小学生心理健康教育",
summary:
"教育部近日印发《关于加强中小学生心理健康教育的指导意见》，要求各地建立健全学生心理健康教育体系，预防和干预学生心理问题。",
image:
"https://ai-public.mastergo.com/ai/img_res/a2b931119f927fa4e1b42724d9f274ef.jpg",
time: "2024-01-14 14:20",
source: "中国教育报",
views: "11,234",
category: { name: "教育", type: "info" },
},
{
title: "教育部发布新规：加强中小学生心理健康教育",
summary:
"教育部近日印发《关于加强中小学生心理健康教育的指导意见》，要求各地建立健全学生心理健康教育体系，预防和干预学生心理问题。",
image:
"https://ai-public.mastergo.com/ai/img_res/a2b931119f927fa4e1b42724d9f274ef.jpg",
time: "2024-01-14 14:20",
source: "中国教育报",
views: "11,234",
category: { name: "教育", type: "info" },
},
{
title: "教育部发布新规：加强中小学生心理健康教育",
summary:
"教育部近日印发《关于加强中小学生心理健康教育的指导意见》，要求各地建立健全学生心理健康教育体系，预防和干预学生心理问题。",
image:
"https://ai-public.mastergo.com/ai/img_res/a2b931119f927fa4e1b42724d9f274ef.jpg",
time: "2024-01-14 14:20",
source: "中国教育报",
views: "11,234",
category: { name: "教育", type: "info" },
},
]);
const hotNews = ref([
{
title: "AI 技术在医疗领域取得重大突破：精准诊断率提升 35%",
views: "28.5万",
},
{ title: "2024 全球经济展望：新兴市场或成增长主引擎", views: "25.3万" },
{ title: "环保新政出台：到 2025 年可再生能源占比将达 30%", views: "22.1万" },
{
title: "第五代移动通信技术实现全域覆盖，用户体验显著提升",
views: "19.8万",
},
{
title: "首届全球数字经济博览会将在深圳举办，聚焦前沿科技",
views: "18.2万",
},
]);
const localNews = ref([
{
title: "城市地铁 12 号线正式开通，打通南北交通大动脉",
image:
"https://ai-public.mastergo.com/ai/img_res/3d43624529823eeaf292c07dcd59244d.jpg",
},
{
title: "市中心文化广场改造完工，将举办系列文化活动",
image:
"https://ai-public.mastergo.com/ai/img_res/449f75b182bd83a315e2e9e85d2b33b7.jpg",
},
]);
const announcements = ref([
{
title: "关于举办 2024 年春季人才招聘会的通知",
tag: "招聘",
type: "success",
},
{ title: "2024 年度市政府工作报告公开征求意见", tag: "公示", type: "info" },
{ title: "关于开展春节期间文化惠民活动的通知", tag: "活动", type: "warning" },
{ title: "2024 年度重点民生工程项目公示", tag: "公示", type: "info" },
{ title: "关于调整部分公交线路的通知", tag: "出行", type: "danger" },
]);
</script>
<style scoped>
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-1 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
src/views/py/reading/Reading.vue 0 → 100644
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="min-h-screen bg-gray-50">
<div class="container mx-auto px-4 py-8 w-[1440px]">
<div class="grid grid-cols-1 gap-8">
<!-- 分类卡片 -->
<div class="grid grid-cols-4 gap-6">
<div
v-for="(card, index) in displayedCards"
:key="index"
class="bg-white rounded-lg shadow-lg p-6 transition-transform hover:scale-105"
>
<div class="h-48 w-full mb-4 overflow-hidden rounded-lg">
<img
:src="card.image"
class="w-full h-full object-cover object-top"
:alt="card.title"
/>
</div>
<h3 class="text-lg font-semibold mb-2 text-black">
{{ card.title }}
</h3>
<p class="text-gray-600 text-sm">{{ card.description }}</p>
</div>
</div>
<!-- 分页器 -->
<div class="flex justify-center mt-8">
<el-pagination
v-model:current-page="currentPage"
:page-size="pageSize"
:total="categoryCards.length"
layout="prev, pager, next"
@current-change="handlePageChange"
/>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, computed } from "vue";
const currentPage = ref(1);
const pageSize = ref(20); // 5行 * 4列 = 20个卡片每页
const categoryCards = ref([
{
title: "健康科普讲堂",
description: "权威专家为您解读健康知识",
image:
"https://ai-public.mastergo.com/ai/img_res/6800ba6e6e9d58a5213dc35cf45aa935.jpg",
},
{
title: "食品安全专区",
description: "关注食品安全 守护健康生活",
image:
"https://ai-public.mastergo.com/ai/img_res/78f282fecb2ca46ce277f577524926de.jpg",
},
{
title: "网络安全知识",
description: "提高网络安全意识",
image:
"https://ai-public.mastergo.com/ai/img_res/bb7c7391590947d1b62c033101ceab1f.jpg",
},
{
title: "法律咨询服务",
description: "专业律师在线解答",
image:
"https://ai-public.mastergo.com/ai/img_res/08d0b1cfc3bcd904005904ec16e87573.jpg",
},
{
title: "医疗保健资讯",
description: "最新医疗动态与健康资讯",
image:
"https://ai-public.mastergo.com/ai/img_res/408a398536fdd6b6a1ee1833fd871af9.jpg",
},
{
title: "金融理财教育",
description: "理财知识普及与风险防范",
image:
"https://ai-public.mastergo.com/ai/img_res/09d3e310f9675431ec0f0b01930223bf.jpg",
},
{
title: "环境保护知识",
description: "关注环保 共建绿色家园",
image:
"https://ai-public.mastergo.com/ai/img_res/1b0f2097ceb49e335495ef6095572d4c.jpg",
},
{
title: "科技创新资讯",
description: "前沿科技动态解读",
image:
"https://ai-public.mastergo.com/ai/img_res/ec1abd62da14d0096ae77aa443cb22e8.jpg",
},
{
title: "教育培训专区",
description: "优质教育资源分享",
image:
"https://ai-public.mastergo.com/ai/img_res/7c7de0bf98bbf1ac35654cd1503ba162.jpg",
},
{
title: "消费者权益",
description: "维护消费者合法权益",
image:
"https://ai-public.mastergo.com/ai/img_res/f42618aed905f908d6bfbde74424ad96.jpg",
},
{
title: "心理健康咨询",
description: "专业心理疏导服务",
image:
"https://ai-public.mastergo.com/ai/img_res/c0e8ccc1760dc19341bb90378d5881e0.jpg",
},
{
title: "职业发展指导",
description: "职业规划与发展建议",
image:
"https://ai-public.mastergo.com/ai/img_res/8d9d7cff19219ee57277896ffe595daf.jpg",
},
{
title: "社会公益服务",
description: "传播正能量 服务社会",
image:
"https://ai-public.mastergo.com/ai/img_res/3624cecd0bd83bc1c7c42a4855ea86c4.jpg",
},
{
title: "文化艺术鉴赏",
description: "提升文化艺术素养",
image:
"https://ai-public.mastergo.com/ai/img_res/ec0d55c0836f437f63cb01abd4de66b6.jpg",
},
{
title: "旅游出行提醒",
description: "安全出行 精彩旅程",
image:
"https://ai-public.mastergo.com/ai/img_res/267be4f0ac5afd82e63d9d014910f868.jpg",
},
{
title: "家居生活指南",
description: "美好生活 从家开始",
image:
"https://ai-public.mastergo.com/ai/img_res/0d72b856588b033151967bb4c2630a15.jpg",
},
]);
const displayedCards = computed(() => {
const start = (currentPage.value - 1) * pageSize.value;
return categoryCards.value.slice(start, start + pageSize.value);
});
const handlePageChange = (val: number) => {
currentPage.value = val;
};
</script>
<style scoped></style>
src/views/py/rumor/Rumor.vue 0 → 100644
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="min-h-screen bg-gray-50">
<div class="container mx-auto px-4 py-8 w-[1440px]">
<div class="flex gap-6">
<div class="flex-1">
<div class="bg-white rounded-lg shadow-sm">
<div
v-for="(news, index) in newsList"
:key="index"
class="group p-4 flex items-start border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer"
>
<div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg">
<img
:src="news.image"
:alt="news.title"
class="w-full h-full object-cover"
/>
</div>
<div class="flex-grow px-6">
<h2
class="text-lg font-semibold mb-2 group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ news.title }}
</h2>
<p class="text-gray-600 text-sm line-clamp-2">
{{ news.summary }}
</p>
<div class="mt-3 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ news.time }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Document /></el-icon>
{{ news.source }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ news.views }}
</span>
</div>
</div>
<div class="w-24 flex-shrink-0 text-right">
<el-tag
:type="news.category.type"
size="small"
class="whitespace-nowrap"
>
{{ news.category.name }}
</el-tag>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:total="total"
:page-sizes="[10, 20, 30, 40]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
<div class="w-80 flex-shrink-0 space-y-6">
<!-- 热点新闻 -->
<div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-red-500"><Star /></el-icon>
热点新闻
</h2>
<div class="space-y-4">
<div
v-for="(item, index) in hotNews"
:key="index"
class="group cursor-pointer"
>
<div
class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ item.title }}
</div>
<div class="text-xs text-gray-500 mt-1">
{{ item.views }} 阅读
</div>
</div>
</div>
</div>
<!-- 本地新闻 -->
<div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-blue-500"><Location /></el-icon>
本地新闻
</h2>
<div class="space-y-4">
<div
v-for="(item, index) in localNews"
:key="index"
class="group cursor-pointer"
>
<div class="h-32 mb-2 overflow-hidden rounded-lg">
<img
:src="item.image"
:alt="item.title"
class="w-full h-full object-cover"
/>
</div>
<div
class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ item.title }}
</div>
</div>
</div>
</div>
<!-- 通知公告 -->
<div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-orange-500"><Bell /></el-icon>
通知公告
</h2>
<div class="space-y-3">
<div
v-for="(item, index) in announcements"
:key="index"
class="flex items-center space-x-2 group cursor-pointer"
>
<el-tag size="small" :type="item.type">{{ item.tag }}</el-tag>
<span
class="text-sm group-hover:text-blue-600 flex-1 line-clamp-1 text-black"
>{{ item.title }}</span
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import {
Clock,
Document,
View,
Star,
Location,
Bell,
ArrowRight,
} from "@element-plus/icons-vue";
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);
const handleSizeChange = (val: number) => {
pageSize.value = val;
};
const handleCurrentChange = (val: number) => {
currentPage.value = val;
};
const newsList = ref([
{
title: "国务院常务会议：部署进一步优化营商环境的政策措施",
summary:
"会议强调要持续优化营商环境，激发市场主体活力，促进经济持续健康发展。会议通过了《关于进一步优化营商环境的实施意见》，提出了一系列具体措施。",
image:
"https://ai-public.mastergo.com/ai/img_res/7008561e2575928d48be3eb6abb45ed5.jpg",
time: "2024-01-15 14:30",
source: "新华网",
views: "12,458",
category: { name: "时政", type: "danger" },
},
{
title: "科技创新引领未来：量子计算研究获重大突破",
summary:
"中国科学家在量子计算领域取得重大突破，成功实现了72量子比特的量子优势验证，为未来量子计算的实用化奠定了重要基础。",
image:
"https://ai-public.mastergo.com/ai/img_res/2e87bb273492cc07fca2c54839b12c72.jpg",
time: "2024-01-15 10:15",
source: "科技日报",
views: "8,932",
category: { name: "科技", type: "primary" },
},
{
title: "全国医疗改革新政策出台：提升基层医疗服务能力",
summary:
"国家卫健委发布新政策，加强基层医疗机构建设，推进分级诊疗制度落实，提高基层医疗服务水平，让群众就医更便利。",
image:
"https://ai-public.mastergo.com/ai/img_res/4e1300130f5ddc4b058201ce0863e853.jpg",
time: "2024-01-15 09:00",
source: "健康时报",
views: "15,674",
category: { name: "民生", type: "success" },
},
{
title: "2024年春节消费预测：文旅市场将迎来开门红",
summary:
"随着假期临近，文旅部门预计今年春节期间国内旅游人次将突破4亿，旅游收入有望超过5000亿元，文旅市场将迎来强劲复苏。",
image:
"https://ai-public.mastergo.com/ai/img_res/00343eaf70fed629fbaa7ab9f692eb8d.jpg",
time: "2024-01-14 16:45",
source: "经济观察报",
views: "9,876",
category: { name: "财经", type: "warning" },
},
{
title: "教育部发布新规：加强中小学生心理健康教育",
summary:
"教育部近日印发《关于加强中小学生心理健康教育的指导意见》，要求各地建立健全学生心理健康教育体系，预防和干预学生心理问题。",
image:
"https://ai-public.mastergo.com/ai/img_res/a2b931119f927fa4e1b42724d9f274ef.jpg",
time: "2024-01-14 14:20",
source: "中国教育报",
views: "11,234",
category: { name: "教育", type: "info" },
},
{
title: "教育部发布新规：加强中小学生心理健康教育",
summary:
"教育部近日印发《关于加强中小学生心理健康教育的指导意见》，要求各地建立健全学生心理健康教育体系，预防和干预学生心理问题。",
image:
"https://ai-public.mastergo.com/ai/img_res/a2b931119f927fa4e1b42724d9f274ef.jpg",
time: "2024-01-14 14:20",
source: "中国教育报",
views: "11,234",
category: { name: "教育", type: "info" },
},
{
title: "教育部发布新规：加强中小学生心理健康教育",
summary:
"教育部近日印发《关于加强中小学生心理健康教育的指导意见》，要求各地建立健全学生心理健康教育体系，预防和干预学生心理问题。",
image:
"https://ai-public.mastergo.com/ai/img_res/a2b931119f927fa4e1b42724d9f274ef.jpg",
time: "2024-01-14 14:20",
source: "中国教育报",
views: "11,234",
category: { name: "教育", type: "info" },
},
]);
const hotNews = ref([
{
title: "AI 技术在医疗领域取得重大突破：精准诊断率提升 35%",
views: "28.5万",
},
{ title: "2024 全球经济展望：新兴市场或成增长主引擎", views: "25.3万" },
{ title: "环保新政出台：到 2025 年可再生能源占比将达 30%", views: "22.1万" },
{
title: "第五代移动通信技术实现全域覆盖，用户体验显著提升",
views: "19.8万",
},
{
title: "首届全球数字经济博览会将在深圳举办，聚焦前沿科技",
views: "18.2万",
},
]);
const localNews = ref([
{
title: "城市地铁 12 号线正式开通，打通南北交通大动脉",
image:
"https://ai-public.mastergo.com/ai/img_res/3d43624529823eeaf292c07dcd59244d.jpg",
},
{
title: "市中心文化广场改造完工，将举办系列文化活动",
image:
"https://ai-public.mastergo.com/ai/img_res/449f75b182bd83a315e2e9e85d2b33b7.jpg",
},
]);
const announcements = ref([
{
title: "关于举办 2024 年春季人才招聘会的通知",
tag: "招聘",
type: "success",
},
{ title: "2024 年度市政府工作报告公开征求意见", tag: "公示", type: "info" },
{ title: "关于开展春节期间文化惠民活动的通知", tag: "活动", type: "warning" },
{ title: "2024 年度重点民生工程项目公示", tag: "公示", type: "info" },
{ title: "关于调整部分公交线路的通知", tag: "出行", type: "danger" },
]);
</script>
<style scoped>
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-1 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
src/views/wm/home/WmHome.vue 0 → 100644
<template>
<!-- 主体内容区 -->
<!-- 居中 -->
<div class="grid grid-cols-12 gap-6 w-[1440px] mx-auto">
<!-- 左侧热点 -->
<div class="col-span-6">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center space-x-2">
<el-icon class="text-red-500"><ChatDotRound /></el-icon>
<h3 class="text-xl font-bold text-black">热点留言</h3>
</div>
<router-link
class="text-sm text-blue-600 hover:text-blue-300 flex items-center"
to="/wm/messagelist"
>更多留言 <el-icon class="ml-1"><ArrowRight /></el-icon
></router-link>
<!-- <div
class="text-sm text-blue-600 hover:text-blue-300 flex items-center"
@click="moreMessageClick"
>
更多留言 <el-icon class="ml-1"><ArrowRight /></el-icon>
</div> -->
</div>
<div class="space-y-3">
<div
v-for="(item, index) in hotTopics"
:key="index"
class="p-4 bg-white rounded-lg hover:shadow-md transition-shadow border-l-4 border-red-500"
@click="messageClick(item)"
>
<div class="flex items-center justify-between">
<span class="text-gray-400 text-sm">{{ item.date }}</span>
<el-tag
size="small"
:type="item.status === '已回复' ? 'success' : 'warning'"
>
{{ item.status }}
</el-tag>
</div>
<p class="mt-2 text-gray-700">{{ item.content }}</p>
</div>
</div>
</div>
<!-- 右侧回复 -->
<div class="col-span-6">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center space-x-2">
<el-icon class="text-red-500"><ChatDotRound /></el-icon>
<h3 class="text-xl font-bold text-black">最新回复</h3>
</div>
<router-link
class="text-sm text-blue-600 hover:text-blue-300 flex items-center"
to="/wm/recoverlist"
>更多回复 <el-icon class="ml-1"><ArrowRight /></el-icon
></router-link>
<!-- <div
class="text-sm text-blue-600 hover:text-blue-300 flex items-center"
@click="moreRecoverClick"
>
更多回复 <el-icon class="ml-1"><ArrowRight /></el-icon>
</div> -->
</div>
<div class="space-y-3">
<div
v-for="(item, index) in replies"
:key="index"
class="p-4 bg-white rounded-lg hover:shadow-md transition-shadow border-l-4 border-blue-500"
@click="recoverClick(item.id)"
>
<div class="flex items-center justify-between mb-3">
<div class="flex-1">
<div class="flex items-center justify-between">
<h4 class="text-gray-900 font-medium">{{ item.title }}</h4>
<span class="text-gray-500 text-sm">{{ item.department }}</span>
</div>
</div>
</div>
<p class="text-gray-700">{{ item.content }}</p>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import {
ChatDotRound,
Comment,
ArrowRight,
Search,
Tickets,
StarFilled,
Position,
Iphone,
Message,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
const hotTopics = ref([
{
date: "2024-01-05",
status: "已回复",
content: "建议在东湖公园增设休息座椅和遮阳设施",
},
{
date: "2024-01-04",
status: "处理中",
content: "关于西山路交通拥堵问题的建议",
},
{
date: "2024-01-04",
status: "已回复",
content: "希望增加春熙路商圈的停车位",
},
{
date: "2024-01-03",
status: "已回复",
content: "建议优化公交线路覆盖范围",
},
{
date: "2024-01-03",
status: "已回复",
content: "建议优化公交线路覆盖范围",
},
{
date: "2024-01-03",
status: "已回复",
content: "建议优化公交线路覆盖范围",
},
]);
const replies = ref([
{
department: "市政服务中心",
title: "关于公园设施改善的回复",
date: "2024-01-05",
content:
"感谢您的建议。我局已安排相关部门实地考察，将在东湖公园增设 20 组休息座椅和 8 处遮阳凉亭，预计本月内完工。",
},
{
department: "公共服务管理处",
title: "关于西山路交通问题的回复",
date: "2024-01-04",
content:
"关于西山路拥堵问题，我们已制定改善方案：1. 优化信号灯配时；2. 增设潮汐车道；3. 加强交通疏导。预计一周内见效。",
},
{
department: "城建服务中心",
title: "关于春熙路停车问题的答复",
date: "2024-01-04",
content:
"春熙路地下停车场扩建工程已列入今年重点项目，将新增车位 500 个，预计 6 月完工。",
},
{
department: "城建服务中心",
title: "关于春熙路停车问题的答复",
date: "2024-01-04",
content:
"春熙路地下停车场扩建工程已列入今年重点项目，将新增车位 500 个，预计 6 月完工。",
},
{
department: "城建服务中心",
title: "关于春熙路停车问题的答复",
date: "2024-01-04",
content:
"春熙路地下停车场扩建工程已列入今年重点项目，将新增车位 500 个，预计 6 月完工。",
},
]);
// //更多留言
// function moreMessageClick() {
// // router.push(path:"/wm/messagelist");
// router.push({
// path: "/wm/messagelist",
// });
// }
function messageClick(id: number) {
router.push({
path: "/wm/messagedetail",
query: {
type: 0,
id: id,
},
});
}
function recoverClick(id: number) {
router.push({
path: "/wm/recoverdetail",
query: {
type: 0,
id: id,
},
});
}
//更多回复
function moreRecoverClick() {}
</script>
<style lang="scss" scoped></style>
src/views/wm/imessage/IMessage.vue 0 → 100644
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="bg-gray-50">
<!-- 主要内容区域 -->
<div class="container mx-auto px-0 py-0 w-[1440px]">
<div class="flex items-center text-sm text-gray-500 mb-5">
<router-link to="/wm/wmhome" class="text-gray-500 hover:text-blue-500"
>首页</router-link
>
<el-icon class="mx-2"><ArrowRight /></el-icon>
<span class="text-gray-900">我要留言</span>
</div>
<div class="grid grid-cols-12 gap-8">
<!-- 左侧导航 -->
<div class="col-span-4">
<div class="bg-yellow-50 rounded-lg shadow-sm p-6">
<div class="flex items-start text-yellow-600">
<el-icon class="mt-0.5 mr-3 text-yellow-600"><Warning /></el-icon>
<div>
<h3 class="text-base font-medium text-yellow-800 mb-5">
留言须知：
</h3>
<h4 class="text-yellow-800 mb-2 font-medium">
“网民有话说”平台受理以下事项:
</h4>
<ul
class="text-sm text-yellow-700 space-y-1 list-disc pl-4 mb-5"
>
<li>
(一)
有关承办单位的工作职责、政策法规、办事流程、执法程序、行政审批等政务信息及公共服务信息的咨询.
</li>
<li>(二) 承办单位职责范围内的非紧急类求助.</li>
<li>
(三)
对城市治理、公共服务、市场监管、经济社会发展等方面的投诉举报和建议,
</li>
<li>
(四)
对行政机关、公共服务企事业单位工作人员工作作风、行政效能等方面的投诉举报.
</li>
<li>(五)其他应当受理的事项。</li>
</ul>
<h4 class="text-yellow-800 mb-2 font-medium">
对以下事项不予受理:
</h4>
<ul
class="text-sm text-yellow-700 space-y-1 list-disc pl-4 mb-5"
>
<li>(一) 不属于承办单位职责或服务范围的事项。</li>
<li>
(二) 依法应当通过110、119、120等紧急服务专线处理的事项。
</li>
<li>
(三)
属于人大、政协、法院、检察院、军队、武警职责范围的事项。
</li>
<li>(四) 依法应当通过诉讼、仲裁、行政复议解决的事项。</li>
<li>
(五)
已进入诉讼、仲裁、行政复议、信访、信息公开等法定程序或已通过上述法定程序处理的事项。
</li>
<li>(六) 涉及国家机密、商业秘密、个人隐私的事项。</li>
<li>
(七)
正在办理过程中或已依法办理完毕，诉求人无新情况、新理由，向“网民有话说”平台提出的同一事项。
</li>
<li>
(八)
违反法律法规、社会公序良俗以及恶意攻击、骚扰或无实质诉求内容的事项。
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 右侧表单 -->
<div class="col-span-8">
<div class="bg-white rounded-lg shadow-sm p-8">
<h2 class="text-2xl font-bold text-gray-800 mb-6">提交留言</h2>
<form @submit.prevent="handleSubmit" class="space-y-6">
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700">
姓名 <span class="text-red-500">*</span>
</label>
<el-input
v-model="formData.name"
placeholder="请输入您的姓名"
class="!rounded-button"
/>
</div>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700">
留言标题 <span class="text-red-500">*</span>
</label>
<el-input
v-model="formData.title"
placeholder="请输入留言标题"
class="!rounded-button"
/>
</div>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700">
详细内容 <span class="text-red-500">*</span>
</label>
<el-input
v-model="formData.content"
type="textarea"
:rows="6"
placeholder="请输入详细内容"
class="!rounded-button"
/>
</div>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700">
联系电话 <span class="text-red-500">*</span>
</label>
<el-input
v-model="formData.phone"
placeholder="请输入联系电话"
class="!rounded-button"
/>
</div>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700">
上传附件
</label>
<el-upload class="upload-demo" :auto-upload="false" action="#">
<el-button
type="danger"
class="!rounded-button whitespace-nowrap"
>选择文件</el-button
>
<template #tip>
<div class="text-sm text-gray-500 mt-1">
支持 jpg、png、pdf 格式文件
</div>
</template>
</el-upload>
</div>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700">
验证码 <span class="text-red-500">*</span>
</label>
<div class="flex items-center space-x-4">
<el-input
v-model="formData.captcha"
placeholder="请输入验证码"
class="!rounded-button"
/>
<div
class="flex-shrink-0 w-32 h-10 bg-gray-100 rounded-lg overflow-hidden cursor-pointer"
@click="refreshCaptcha"
>
<img
:src="captchaImage"
alt="验证码"
class="w-full h-full object-cover"
/>
</div>
</div>
</div>
<div class="flex justify-center">
<el-button
type="danger"
@click="handleSubmit"
class="!rounded-button whitespace-nowrap px-12 text-base"
>
提交留言
</el-button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { Warning, ArrowRight } from "@element-plus/icons-vue";
const letters = Array.from("ABCDEFGHJKLMNPQRSTUVWXYZ23456789");
const generateCaptcha = () => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
if (!ctx) return "";
canvas.width = 128;
canvas.height = 40;
// 设置背景
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 生成验证码文字
const captchaText = Array.from(
{ length: 4 },
() => letters[Math.floor(Math.random() * letters.length)]
).join("");
// 绘制文字
ctx.font = "bold 24px Arial";
ctx.textBaseline = "middle";
// 随机颜色和位置绘制每个字符
for (let i = 0; i < captchaText.length; i++) {
const x = 20 + i * 25;
const y = 20 + Math.random() * 8 - 4;
const angle = (Math.random() - 0.5) * 0.4;
ctx.save();
ctx.translate(x, y);
ctx.rotate(angle);
// 随机颜色
const hue = Math.floor(Math.random() * 360);
ctx.fillStyle = `hsl(${hue}, 70%, 40%)`;
ctx.fillText(captchaText[i], 0, 0);
ctx.restore();
}
// 添加干扰线
for (let i = 0; i < 3; i++) {
ctx.beginPath();
ctx.strokeStyle = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${
Math.random() * 255
}, 0.5)`;
ctx.lineWidth = 1;
ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
ctx.stroke();
}
// 添加噪点
for (let i = 0; i < 50; i++) {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
ctx.fillStyle = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${
Math.random() * 255
}, 0.5)`;
ctx.fillRect(x, y, 2, 2);
}
return {
text: captchaText,
image: canvas.toDataURL(),
};
};
const captchaText = ref("");
const captchaImage = ref("");
const refreshCaptcha = () => {
const captcha = generateCaptcha();
captchaText.value = captcha.text;
captchaImage.value = captcha.image;
};
onMounted(() => {
refreshCaptcha();
});
const formData = ref({
name: "",
title: "",
content: "",
phone: "",
captcha: "",
});
const handleSubmit = () => {
if (
!formData.value.name ||
!formData.value.title ||
!formData.value.content ||
!formData.value.phone ||
!formData.value.captcha
) {
ElMessage({
message: "请填写必填项",
type: "warning",
});
return;
}
if (formData.value.captcha.toUpperCase() !== captchaText.value) {
ElMessage({
message: "验证码错误",
type: "error",
});
refreshCaptcha();
formData.value.captcha = "";
return;
}
ElMessage({
message: "提交成功",
type: "success",
});
// 重置表单和验证码
formData.value = {
name: "",
title: "",
content: "",
phone: "",
captcha: "",
};
refreshCaptcha();
};
</script>
<style scoped>
:deep(.el-input__wrapper) {
box-shadow: 0 0 0 1px #e5e7eb !important;
}
:deep(.el-input__wrapper:hover) {
box-shadow: 0 0 0 1px #d1d5db !important;
}
:deep(.el-input__wrapper.is-focus) {
box-shadow: 0 0 0 1px #3b82f6 !important;
}
:deep(.el-textarea__inner) {
box-shadow: 0 0 0 1px #e5e7eb !important;
border-radius: 0.5rem;
}
:deep(.el-textarea__inner:hover) {
box-shadow: 0 0 0 1px #d1d5db !important;
}
:deep(.el-textarea__inner:focus) {
box-shadow: 0 0 0 1px #3b82f6 !important;
}
</style>
src/views/wm/message/MessageDetail.vue 0 → 100644
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="bg-gray-50">
<div class="mx-auto w-[1440px] px-4 py-0">
<!-- 面包屑导航 -->
<div class="mb-6 flex items-center text-sm text-gray-500">
<router-link to="/wm/wmhome" class="hover:text-gray-600 text-gray-500"
>首页</router-link
>
<el-icon v-if="type == 1" class="mx-2"><ArrowRight /></el-icon>
<router-link
v-if="type == 1"
to="/wm/messagelist"
class="hover:text-gray-600 text-gray-500"
>留言列表</router-link
>
<el-icon class="mx-2"><ArrowRight /></el-icon>
<span class="text-gray-900">留言详情</span>
</div>
<!-- 主要内容卡片 -->
<div class="rounded-lg bg-white p-6 shadow-sm">
<!-- 标题区域 -->
<div class="mb-6">
<h1 class="mb-4 text-xl font-medium text-gray-900">
东湖新区排水管网改造工程环境污染问题
</h1>
<div class="flex items-center space-x-4 text-sm text-gray-500">
<span
class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700"
>
已办理
</span>
<span>留言人: 李**</span>
<span>时间: 2024年1月15日 09:23</span>
</div>
</div>
<!-- 问题描述 -->
<div class="mb-8">
<p class="mb-4 text-gray-600">
施工扬尘污染问题严重影响了周边居民的正常生活，希望相关部门能够重视此事。主要存在以下问题：
</p>
<ul class="ml-6 list-disc space-y-2 text-gray-600">
<li>施工现场未按要求设置防尘设施</li>
<li>运输车辆未做好防尘措施</li>
<li>现场积尘较多，未及时清理</li>
</ul>
<p class="mt-4 text-gray-600">
建议加强监管力度，落实各项防尘措施，保障居民生活环境。
</p>
</div>
<!-- 官方回复 -->
<div class="rounded-lg bg-gray-50 p-6">
<h2 class="mb-4 text-lg font-medium text-gray-900">官方回复：</h2>
<div class="space-y-4 text-gray-600">
<p>
网友您好！收到您的投诉后，我局高度重视，立即组织相关部门进行实地调查和处理。经查：
</p>
<p>
1.
关于城东新区排水管网改造工程施工现场扬尘污染问题，我局已要求施工单位立即采取以下整改措施：
</p>
<ul class="ml-6 list-disc space-y-2">
<li>增设雾炮机和喷淋设备，加强施工现场降尘</li>
<li>对裸露土地进行苫盖，设置防尘网</li>
<li>增加洒水车频次，保持路面湿润</li>
</ul>
<p>
2.
目前整改措施已全部落实到位，扬尘污染问题得到有效控制。后续我局将继续加强监管，确保施工期间不发生扬尘污染问题。
</p>
<p>感谢您对我们工作的监督，我们将持续改进服务质量。</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
const router = useRoute();
const type = router.query.type;
</script>
<style scoped>
.min-h-screen {
min-height: 1024px;
}
</style>
src/views/wm/message/MessageList.vue 0 → 100644
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="bg-gray-50">
<div class="w-[1440px] mx-auto px-4">
<!-- 面包屑导航 -->
<div class="flex items-center justify-between py-2 border-b mb-5">
<div class="flex items-center text-sm text-gray-500">
<router-link to="/wm/wmhome" class="text-gray-500 hover:text-blue-500"
>首页</router-link
>
<el-icon class="mx-2"><ArrowRight /></el-icon>
<span class="text-gray-900">留言列表</span>
</div>
<!-- 搜索框 -->
<div class="relative">
<input
type="text"
v-model="searchText"
placeholder="搜索留言"
class="w-[300px] h-8 pl-4 pr-10 rounded-lg border-none bg-white shadow-sm focus:ring-2 focus:ring-blue-500 text-sm"
/>
<el-icon
class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
><Search
/></el-icon>
</div>
</div>
<!-- 留言列表 -->
<div class="space-y-4">
<div
v-for="(item, index) in messageList"
:key="index"
class="bg-white rounded-lg shadow-sm p-6 transition-all duration-300 hover:shadow-lg hover:scale-[1.01] cursor-pointer"
@click="clickList(item.id)"
>
<h2 class="text-lg font-medium text-gray-900 mb-3">
{{ item.title }}
</h2>
<p class="text-gray-600 mb-4 leading-relaxed">{{ item.content }}</p>
<div class="flex items-center text-sm text-gray-500">
<span>{{ item.date }}</span>
<span class="mx-2">留言人：{{ item.author }}</span>
</div>
</div>
</div>
<!-- 分页 -->
<div class="flex justify-center mt-8">
<el-pagination
v-model:current-page="currentPage"
:page-size="10"
:total="50"
:pager-count="5"
layout="prev, pager, next"
class="!rounded-button"
/>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Search, ArrowRight } from "@element-plus/icons-vue";
const router = useRouter();
const searchText = ref("");
const currentPage = ref(1);
const messageList = ref([
{
title: "反映某建筑公司拖欠农民工工资问题",
content:
"太原市建筑工人反映某建筑公司拖欠其与工友共计 50 余人约 156 万元工资。经劳动监察部门介入调查，目前该公司已全额支付拖欠资金，并按规定支付赔偿金。",
date: "2024-12-27 09:41",
author: "张先生",
},
{
title: "某快递公司拖欠快递员工资及社保问题",
content:
"市民李师傅反映某快递公司拖欠员工工资 3 个月，且未缴纳社会保险。经调查核实并约谈该公司负责人，该公司已补发全部工资并补缴社保，承诺今后按时发放工资。",
date: "2024-12-02 12:24",
author: "李先生",
},
{
title: "反映某餐饮企业克扣服务员工资问题",
content:
"服务员投诉某连锁餐饮企业以各种理由克扣工资。经查实，该企业存在违规罚款、未按约定发放绩效工资等问题。目前已责令整改，并补发被克扣工资。",
date: "2024-12-12 09:02",
author: "张女士",
},
{
title: "某科技公司拖欠开发人员工资及年终奖",
content:
"工程师等 12 名技术人员投诉某科技公司拖欠 2023 年 11-12 月工资及年终奖共计 89 万元。经多方协调，该公司已筹措资金完成全部支付。",
date: "2024-12-11 15:00",
author: "王先生",
},
]);
function clickList(id: number) {
router.push({
path: "/wm/messagedetail",
query: {
type: 1,
id: id,
},
});
}
</script>
<style scoped>
.el-pagination {
--el-pagination-button-bg-color: transparent;
}
</style>
src/views/wm/recover/RecoverDetail.vue 0 → 100644
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="bg-gray-50">
<div class="mx-auto w-[1440px] px-4 py-0">
<!-- 面包屑导航 -->
<div class="mb-6 flex items-center text-sm text-gray-500">
<router-link to="/wm/wmhome" class="hover:text-gray-600 text-gray-500"
>首页</router-link
>
<el-icon v-if="type == 1" class="mx-2"><ArrowRight /></el-icon>
<router-link
v-if="type == 1"
to="/wm/recoverlist"
class="hover:text-gray-600 text-gray-500"
>回复列表</router-link
>
<el-icon class="mx-2"><ArrowRight /></el-icon>
<span class="text-gray-900">回复详情</span>
</div>
<!-- 主要内容卡片 -->
<div class="rounded-lg bg-white p-6 shadow-sm">
<!-- 标题区域 -->
<div class="mb-6">
<h1 class="mb-4 text-xl font-medium text-gray-900">
东湖新区排水管网改造工程环境污染问题
</h1>
<div class="flex items-center space-x-4 text-sm text-gray-500">
<span
class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700"
>
已办理
</span>
<span>留言人: 李**</span>
<span>时间: 2024年1月15日 09:23</span>
</div>
</div>
<!-- 问题描述 -->
<div class="mb-8">
<p class="mb-4 text-gray-600">
施工扬尘污染问题严重影响了周边居民的正常生活，希望相关部门能够重视此事。主要存在以下问题：
</p>
<ul class="ml-6 list-disc space-y-2 text-gray-600">
<li>施工现场未按要求设置防尘设施</li>
<li>运输车辆未做好防尘措施</li>
<li>现场积尘较多，未及时清理</li>
</ul>
<p class="mt-4 text-gray-600">
建议加强监管力度，落实各项防尘措施，保障居民生活环境。
</p>
</div>
<!-- 官方回复 -->
<div class="rounded-lg bg-gray-50 p-6">
<h2 class="mb-4 text-lg font-medium text-gray-900">官方回复：</h2>
<div class="space-y-4 text-gray-600">
<p>
网友您好！收到您的投诉后，我局高度重视，立即组织相关部门进行实地调查和处理。经查：
</p>
<p>
1.
关于城东新区排水管网改造工程施工现场扬尘污染问题，我局已要求施工单位立即采取以下整改措施：
</p>
<ul class="ml-6 list-disc space-y-2">
<li>增设雾炮机和喷淋设备，加强施工现场降尘</li>
<li>对裸露土地进行苫盖，设置防尘网</li>
<li>增加洒水车频次，保持路面湿润</li>
</ul>
<p>
2.
目前整改措施已全部落实到位，扬尘污染问题得到有效控制。后续我局将继续加强监管，确保施工期间不发生扬尘污染问题。
</p>
<p>感谢您对我们工作的监督，我们将持续改进服务质量。</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
const router = useRoute();
const type = router.query.type;
</script>
<style scoped>
.min-h-screen {
min-height: 1024px;
}
</style>
src/views/wm/recover/RecoverList.vue 0 → 100644
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="bg-gray-50">
<div class="mx-auto w-[1440px] px-4">
<!-- 面包屑导航 -->
<div class="flex items-center justify-between py-2 border-b mb-5">
<div class="flex items-center text-sm text-gray-500">
<router-link to="/wm/wmhome" class="text-gray-500 hover:text-blue-500"
>首页</router-link
>
<el-icon class="mx-2"><ArrowRight /></el-icon>
<span class="text-gray-900">回复列表</span>
</div>
<!-- 搜索框 -->
<div class="relative">
<input
type="text"
v-model="searchText"
placeholder="搜索回复"
class="w-[300px] h-8 pl-4 pr-10 rounded-lg border-none bg-white shadow-sm focus:ring-2 focus:ring-blue-500 text-sm"
/>
<el-icon
class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
><Search
/></el-icon>
</div>
</div>
<!-- 回复列表 -->
<div>
<div
v-for="(item, index) in displayItems"
:key="index"
class="bg-white rounded-lg p-6 mb-4 shadow-sm hover:shadow-md transition-shadow"
@click="clickList(item.id)"
>
<div class="flex justify-between items-start mb-3">
<h3 class="text-lg font-medium text-gray-900">{{ item.title }}</h3>
<span
:class="[
'px-3 py-1 rounded-full text-sm',
item.status === '已处理'
? 'bg-green-50 text-green-600'
: 'bg-orange-50 text-orange-600',
]"
>{{ item.status }}</span
>
</div>
<p class="text-gray-600 mb-4">{{ item.content }}</p>
<div class="text-sm text-gray-400">{{ item.time }}</div>
</div>
</div>
<!-- 分页 -->
<div class="flex justify-center mt-8">
<el-pagination
v-model:current-page="currentPage"
:page-size="pageSize"
:total="totalItems"
:pager-count="5"
layout="prev, pager, next"
class="!rounded-button"
/>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, computed } from "vue";
import { Search, ArrowRight } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
const searchText = ref("");
const currentPage = ref(1);
const pageSize = ref(5);
const allItems = [
{
title: "关于东湖公园设施改善的回复",
content:
"感谢您的建议。我局已安排相关部门实地考察，将在东湖公园增设 25 组休闲椅和 10 处遮阳凉亭，预计本月内完工。",
time: "2024-12-27 09:41",
status: "已处理",
},
{
title: "关于龙泉山交通问题的回复",
content:
"关于龙泉山拥堵问题，我们已制定改善方案：1. 优化信号灯配时；2. 增设潮汐车道；3. 加强交通疏导。预计一周内见效。",
time: "2024-12-02 12:24",
status: "已处理",
},
{
title: "关于金融大厦停车问题的回复",
content:
"金融大厦地下停车场扩建工程已列入今年重点项目，将新增车位 600 个，预计 6 月完工。",
time: "2024-12-02 12:24",
status: "已处理",
},
{
title: "关于市民广场交通设施的回复",
content:
"我们将对市民广场周边道路进行优化：1. 新增人行天桥；2. 扩建非机动车道；3. 增设智能红绿灯。预计两周内完成。",
time: "2024-12-02 12:24",
status: "未处理",
},
{
title: "关于青山湖环境整治的回复",
content:
"青山湖环境整治工程已启动，包括水质净化、垃圾清理、绿化提升等多项工作，预计三个月内完成。",
time: "2024-12-02 12:24",
status: "未处理",
},
];
const totalItems = computed(() => allItems.length);
const displayItems = computed(() => {
const start = (currentPage.value - 1) * pageSize.value;
const filtered = allItems.filter(
(item) =>
item.title.includes(searchText.value) ||
item.content.includes(searchText.value)
);
return filtered.slice(start, start + pageSize.value);
});
function clickList(id: number) {
router.push({
path: "/wm/recoverdetail",
query: {
type: 1,
id: id,
},
});
}
</script>
<style scoped>
.el-pagination {
justify-content: center;
}
</style>
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