Skip to content

E
emergency-project
Commit 882f2d5f by York
Options

first push

parents
Showing with 2404 additions and 0 deletions
.gitignore 0 → 100644
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
/cypress/videos/
/cypress/screenshots/
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.tsbuildinfo
.vscode/extensions.json 0 → 100644
{
"recommendations": ["Vue.volar"]
}
README.md 0 → 100644
# emergency-project
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
## Type Support for `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
## Customize configuration
See [Vite Configuration Reference](https://vite.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Type-Check, Compile and Minify for Production
```sh
npm run build
```
env.d.ts 0 → 100644
/// <reference types="vite/client" />
index.html 0 → 100644
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
{
"name": "emergency-project",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --build"
},
"dependencies": {
"element-plus": "^2.9.1",
"pinia": "^2.3.0",
"swiper": "^11.1.15",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
},
"devDependencies": {
"@tsconfig/node22": "^22.0.0",
"@types/node": "^22.10.2",
"@vitejs/plugin-vue": "^5.2.1",
"@vue/tsconfig": "^0.7.0",
"autoprefixer": "^10.4.20",
"npm-run-all2": "^7.0.2",
"postcss": "^8.4.49",
"tailwindcss": "^3.4.17",
"typescript": "~5.6.3",
"vite": "^6.0.5",
"vite-plugin-vue-devtools": "^7.6.8",
"vue-tsc": "^2.1.10"
}
}
postcss.config.js 0 → 100644
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
src/App.vue 0 → 100644
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="min-h-screen bg-gray-50">
<!-- 顶部横幅 -->
<header class="bg-white shadow">
<div class="container mx-auto px-4 h-20 flex items-center">
<img
src="https://ai-public.mastergo.com/ai/img_res/38fd70bdc77f4305c862a0962f46c48c.jpg"
alt="国徽"
class="h-14 mr-4"
/>
<div class="flex-1 flex items-center justify-between">
<h1 class="text-2xl font-bold text-black">
太原市互联网应急指挥和举报中心
</h1>
<div class="relative w-[360px]">
<el-input
v-model="searchQuery"
class="!rounded-full"
placeholder="搜索新闻、通知、政策文件..."
:prefix-icon="Search"
/>
</div>
</div>
</div>
</header>
<!-- 主导航 -->
<nav class="bg-blue-800 text-white">
<div class="container mx-auto px-4">
<ul class="flex space-x-8 h-14">
<li
v-for="(item, index) in navItems"
:key="index"
class="flex items-center cursor-pointer hover:bg-blue-700 px-4"
:class="{ 'bg-blue-700': activeNav === index }"
@click="navigateTo(index)"
>
{{ item }}
</li>
</ul>
</div>
</nav>
<router-view></router-view>
<!-- 页脚 -->
<footer class="bg-gray-800 text-gray-300 mt-10">
<div class="container mx-auto px-4 py-10 w-[1440px]">
<div class="grid grid-cols-2 gap-8">
<div>
<h3 class="text-lg font-medium mb-4">联系我们</h3>
<div class="space-y-2">
<p>地址：山西省太原市迎泽区迎泽大街 369 号</p>
<p>电话：0351-12345678</p>
<p>邮箱：contact@tynet.gov.cn</p>
</div>
</div>
<div>
<h3 class="text-lg font-medium mb-4">关注我们</h3>
<div class="flex space-x-4">
<el-icon class="text-2xl"><Message /></el-icon>
<el-icon class="text-2xl"><Share /></el-icon>
<el-icon class="text-2xl"><Link /></el-icon>
</div>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-700 text-center">
<p>Copyright © 2024 太原市互联网应急指挥和举报中心 版权所有</p>
<p class="mt-2">晋ICP备12345678号-1 | 晋公网安备 14010002000001号</p>
</div>
</div>
</footer>
</div>
</template>
<script setup>
import { ref } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Autoplay } from "swiper/modules";
import { useRouter } from "vue-router";
import {
VideoPlay,
Message,
Share,
Link,
Search,
Document,
} from "@element-plus/icons-vue";
const router = useRouter();
const swiperModules = [Pagination, Autoplay];
const searchQuery = ref("");
const activeNav = ref(0);
const navItems = ["首页", "新闻热点", "太原新闻", "山西新闻", "通知公告"];
function navigateTo(index) {
const routes = [
{ path: "/home/home" },
{ path: "/home/news" },
{ path: "/home/tynews" },
{ path: "/home/sxnews" },
{ path: "/home/announcements" },
];
router.push(routes[index].path).catch((err) => {});
activeNav.value = index;
}
const hotNews = [
{
title: '太原市获评"2023年度网络安全示范城市"',
date: "2024-01-13",
},
{
title: "我市开展网络安全专项整治行动",
date: "2024-01-12",
},
{
title: "太原互联网企业助力乡村振兴",
date: "2024-01-11",
},
];
const videoNews = [
{
title: "2024太原网络安全周开幕式",
cover:
"https://ai-public.mastergo.com/ai/img_res/c127709d932c688f0fd802b468fbeb1b.jpg",
},
{
title: "太原智慧城市建设成果展示",
cover:
"https://ai-public.mastergo.com/ai/img_res/04b4d2ca1d91d73dac6a0f4316b13165.jpg",
},
];
</script>
<style scoped>
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
src/assets/base.css 0 → 100644
/* color palette from <https://github.com/vuejs/theme> */
:root {
--vt-c-white: #ffffff;
--vt-c-white-soft: #f8f8f8;
--vt-c-white-mute: #f2f2f2;
--vt-c-black: #181818;
--vt-c-black-soft: #222222;
--vt-c-black-mute: #282828;
--vt-c-indigo: #2c3e50;
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
--vt-c-text-light-1: var(--vt-c-indigo);
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
--vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}
/* semantic color variables for this project */
:root {
--color-background: var(--vt-c-white);
--color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute);
--color-border: var(--vt-c-divider-light-2);
--color-border-hover: var(--vt-c-divider-light-1);
--color-heading: var(--vt-c-text-light-1);
--color-text: var(--vt-c-text-light-1);
--section-gap: 160px;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: var(--vt-c-black);
--color-background-soft: var(--vt-c-black-soft);
--color-background-mute: var(--vt-c-black-mute);
--color-border: var(--vt-c-divider-dark-2);
--color-border-hover: var(--vt-c-divider-dark-1);
--color-heading: var(--vt-c-text-dark-1);
--color-text: var(--vt-c-text-dark-2);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
font-weight: normal;
}
body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
transition:
color 0.5s,
background-color 0.5s;
line-height: 1.6;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
src/assets/logo.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
src/assets/main.css 0 → 100644
@import "./base.css";
@import "./tailwin.css";
#app {
/* max-width: 1440px; */
margin: 0 auto;
/* padding: 2rem; */
font-weight: normal;
}
a,
.green {
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
padding: 3px;
}
@media (hover: hover) {
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
}
}
@media() {
body {
display: flex;
place-items: center;
}
#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
}
src/assets/tailwin.css 0 → 100644
@tailwind base;
@tailwind components;
@tailwind utilities;
src/layout/index.vue 0 → 100644
<template>
<div></div>
</template>
<script>
export default {
setup() {
return {};
},
};
</script>
<style lang="scss" scoped></style>
src/main.ts 0 → 100644
import "./assets/main.css";
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
import ElementPlus from "element-plus"; //导入element-plus所有模块和功能
import "element-plus/dist/index.css"; //导入element-plus所有的全局CSS样式
const app = createApp(App);
app.use(createPinia());
app.use(router);
app.use(ElementPlus);
app.mount("#app");
src/router/index.ts 0 → 100644
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/home/home/HomeView.vue";
import News from "../views/home/hotnews/News.vue";
import TaiyuanNews from "../views/home/tynews/TaiyuanNews.vue";
import ShanxiNews from "../views/home/sxnews/ShanxiNews.vue";
import Announcements from "../views/home/announcements/Announcements.vue";
import PyHome from "../views/py/PyHome.vue";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "/home/home",
name: "home",
component: HomeView,
},
{
path: "/home/news",
name: "News",
component: News,
},
{
path: "/home/tynews",
name: "TyNews",
component: TaiyuanNews,
},
{
path: "/home/sxnews",
name: "SxNews",
component: ShanxiNews,
},
{
path: "/home/announcements",
name: "Announcements",
component: Announcements,
},
{
path: "/py",
name: "PyHome",
component: PyHome,
},
],
});
export default router;
src/stores/counter.ts 0 → 100644
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubleCount, increment }
})
src/views/home/announcements/Announcements.vue 0 → 100644
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="min-h-screen bg-gray-50">
<div class="w-[1440px] mx-auto px-4 py-8">
<!-- 公告列表 -->
<div class="bg-white rounded-lg shadow-sm">
<el-table
:data="currentPageData"
style="width: 100%"
:header-cell-style="{ background: '#f8f9fa' }"
>
<el-table-column label="标题" min-width="400">
<template #default="{ row }">
<div class="flex items-center">
<el-icon v-if="row.isTop" class="mr-2 text-red-500">
<Top />
</el-icon>
<span :class="{ 'text-red-500': row.isTop }">{{
row.title
}}</span>
<el-tag v-if="row.isNew" size="small" type="danger" class="ml-2"
>新</el-tag
>
</div>
</template>
</el-table-column>
<el-table-column prop="category" label="类别" width="120">
<template #default="{ row }">
<el-tag :type="row.categoryType" size="small">{{
row.category
}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="department" label="发布部门" width="150" />
<el-table-column prop="date" label="发布时间" width="180" />
<el-table-column label="操作" width="100" fixed="right">
<template #default="{ row }">
<el-button
type="primary"
link
size="small"
class="!rounded-button whitespace-nowrap"
@click="viewDetail(row)"
>
查看详情
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="flex justify-center p-4">
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:total="filteredData.length"
:page-sizes="[10, 20, 30, 50]"
layout="total, sizes, prev, pager, next, jumper"
/>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, computed } from "vue";
import { Top } from "@element-plus/icons-vue";
interface Announcement {
id: number;
title: string;
category: string;
categoryType: "" | "success" | "warning" | "info";
department: string;
date: string;
isTop: boolean;
isNew: boolean;
}
const currentPage = ref(1);
const pageSize = ref(10);
const announcements: Announcement[] = [
{
id: 1,
title: "关于 2024 年度科技创新项目申报工作的通知",
category: "重要通知",
categoryType: "warning",
department: "科技创新部",
date: "2024-01-15 14:30",
isTop: true,
isNew: true,
},
{
id: 2,
title: "2024 年春节放假安排及工作调整说明",
category: "公告",
categoryType: "info",
department: "人力资源部",
date: "2024-01-14 16:45",
isTop: true,
isNew: true,
},
{
id: 3,
title: "关于开展 2023 年度员工满意度调查的通知",
category: "普通通知",
categoryType: "",
department: "综合管理部",
date: "2024-01-13 09:15",
isTop: false,
isNew: false,
},
{
id: 4,
title: "公司新版办公系统上线试运行通知",
category: "系统通知",
categoryType: "success",
department: "信息技术部",
date: "2024-01-12 11:20",
isTop: false,
isNew: true,
},
{
id: 5,
title: "2023 年度优秀员工表彰大会通知",
category: "重要通知",
categoryType: "warning",
department: "人力资源部",
date: "2024-01-11 15:30",
isTop: false,
isNew: false,
},
{
id: 6,
title: "关于组织开展消防安全培训的通知",
category: "普通通知",
categoryType: "",
department: "安全管理部",
date: "2024-01-10 13:45",
isTop: false,
isNew: false,
},
{
id: 7,
title: "2024 年第一季度经营工作会议通知",
category: "重要通知",
categoryType: "warning",
department: "经营管理部",
date: "2024-01-09 10:00",
isTop: false,
isNew: false,
},
{
id: 8,
title: "公司新版企业文化手册发布通知",
category: "公告",
categoryType: "info",
department: "企业文化部",
date: "2024-01-08 16:20",
isTop: false,
isNew: false,
},
{
id: 9,
title: "关于开展年度健康体检工作的通知",
category: "普通通知",
categoryType: "",
department: "人力资源部",
date: "2024-01-07 14:15",
isTop: false,
isNew: false,
},
{
id: 10,
title: "公司新版薪酬福利制度实施通知",
category: "重要通知",
categoryType: "warning",
department: "人力资源部",
date: "2024-01-06 09:30",
isTop: false,
isNew: false,
},
{
id: 11,
title: "关于加强办公场所节能降耗工作的通知",
category: "普通通知",
categoryType: "",
department: "行政管理部",
date: "2024-01-05 11:40",
isTop: false,
isNew: false,
},
{
id: 12,
title: "2024 年度培训计划发布通知",
category: "公告",
categoryType: "info",
department: "人力资源部",
date: "2024-01-04 15:50",
isTop: false,
isNew: false,
},
];
const filteredData = computed(() => announcements);
const currentPageData = computed(() => {
const start = (currentPage.value - 1) * pageSize.value;
const end = start + pageSize.value;
return filteredData.value.slice(start, end);
});
const viewDetail = (row: Announcement) => {
// 查看详情逻辑
console.log("查看详情:", row);
};
</script>
<style scoped>
.el-input :deep(.el-input__wrapper) {
box-shadow: none !important;
}
.el-table :deep(th.el-table__cell) {
font-weight: 600;
}
</style>
src/views/home/home/HomeView.vue 0 → 100644
<template>
<div class="min-h-screen bg-gray-50">
<!-- 轮播图 -->
<div class="container mx-auto px-4 mt-6 w-[1440px]">
<swiper
:modules="swiperModules"
:slides-per-view="1"
:loop="true"
:pagination="{ clickable: true }"
:autoplay="{ delay: 3000 }"
class="h-[400px] rounded-lg overflow-hidden"
>
<swiper-slide v-for="(slide, index) in slides" :key="index">
<div class="relative w-full h-full">
<img
:src="slide.image"
:alt="slide.title"
class="w-full h-full object-cover"
/>
<div
class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6"
>
<h3 class="text-white text-xl font-medium">{{ slide.title }}</h3>
</div>
</div>
</swiper-slide>
</swiper>
</div>
<!-- 快捷入口 -->
<div class="container mx-auto px-4 mt-10 w-[1440px]">
<div class="grid grid-cols-3 gap-6">
<div
v-for="(entry, index) in quickEntries"
:key="index"
class="relative h-48 rounded-xl overflow-hidden group cursor-pointer transform transition-all duration-300 hover:scale-105 hover:-translate-y-1 shadow-lg hover:shadow-xl"
@click="handleClick(index, entry)"
>
<img
:src="entry.bg"
:alt="entry.title"
class="w-full h-full object-cover"
/>
<div
class="absolute inset-0 bg-gradient-to-br from-black/60 via-black/40 to-transparent backdrop-blur-[2px] group-hover:backdrop-blur-[4px] transition-all"
>
<div
class="h-full flex flex-col items-center justify-center text-white"
>
<el-icon
class="text-5xl mb-4 transform transition-transform duration-300 group-hover:scale-110"
><component :is="entry.icon"
/></el-icon>
<span class="text-xl font-semibold text-center px-6">{{
entry.title
}}</span>
</div>
</div>
</div>
</div>
</div>
<!-- 新闻内容区 -->
<div class="container mx-auto px-4 mt-10 grid grid-cols-3 gap-6 w-[1440px]">
<!-- 最新新闻 -->
<div class="col-span-2 bg-white rounded-lg p-6 shadow-sm">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold" style="color: #000">最新新闻</h2>
<el-button type="primary" class="!rounded-button" text
>更多</el-button
>
</div>
<div class="space-y-4">
<div
v-for="(news, index) in latestNews"
:key="index"
class="flex items-start space-x-4 pb-4 border-b last:border-0"
>
<img
:src="news.image"
:alt="news.title"
class="w-32 h-24 object-cover rounded"
/>
<div>
<h3
class="text-lg font-medium mb-2 hover:text-blue-600 text-black"
>
{{ news.title }}
</h3>
<p class="text-gray-600 text-sm line-clamp-2">{{ news.desc }}</p>
<div class="mt-2 text-sm text-gray-500">{{ news.date }}</div>
</div>
</div>
</div>
</div>
<!-- 侧边栏 -->
<div class="space-y-6">
<!-- 热门新闻 -->
<div class="bg-white rounded-lg p-6 shadow-sm">
<h2 class="text-xl font-bold mb-4" style="color: #000">热门新闻</h2>
<div class="space-y-4">
<div
v-for="(hot, index) in hotNews"
:key="index"
class="border-b last:border-0 pb-4"
>
<h3
class="text-base font-medium hover:text-blue-600 cursor-pointer text-black"
>
{{ hot.title }}
</h3>
<div class="mt-2 text-sm text-gray-500">{{ hot.date }}</div>
</div>
</div>
</div>
<!-- 视频新闻 -->
<div class="bg-white rounded-lg p-6 shadow-sm">
<h2 class="text-xl font-bold mb-4 text-black">视频新闻</h2>
<div class="space-y-4">
<div
v-for="(video, index) in videoNews"
:key="index"
class="group cursor-pointer"
>
<div class="relative">
<img
:src="video.cover"
:alt="video.title"
class="w-full h-32 object-cover rounded"
/>
<div
class="absolute inset-0 bg-black/30 group-hover:bg-black/50 flex items-center justify-center"
>
<el-icon class="text-white text-4xl"><VideoPlay /></el-icon>
</div>
</div>
<h3
class="mt-2 text-base font-medium group-hover:text-blue-600 text-black"
>
{{ video.title }}
</h3>
</div>
</div>
</div>
</div>
</div>
<!-- 权威发布与辟谣专区 -->
<div class="container mx-auto px-4 mt-10 w-[1440px]">
<div class="grid grid-cols-2 gap-6">
<!-- 权威发布 -->
<div class="bg-white rounded-lg p-6 shadow-sm">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold text-black">权威发布</h2>
<el-button type="primary" class="!rounded-button" text
>更多</el-button
>
</div>
<div class="space-y-4">
<div
v-for="(item, index) in authoritativeNews"
:key="index"
class="flex items-center space-x-3 pb-3 border-b last:border-b-0"
>
<!-- <el-icon class="text-blue-600 text-xl"><Document /></el-icon> -->
<div class="flex-1">
<h3
class="text-base font-medium hover:text-blue-600 cursor-pointer text-black"
>
{{ item.title }}
</h3>
<div class="mt-1 text-sm text-gray-500">{{ item.date }}</div>
</div>
</div>
</div>
</div>
<!-- 辟谣专区 -->
<div class="bg-white rounded-lg p-6 shadow-sm">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold text-black">辟谣专区</h2>
<el-button type="primary" class="!rounded-button" text
>更多</el-button
>
</div>
<div class="space-y-4">
<div
v-for="(item, index) in rumourNews"
:key="index"
class="flex items-start space-x-3 pb-4 border-b last:border-b-0"
>
<div class="flex-shrink-0 w-24 h-16">
<img
:src="item.image"
:alt="item.title"
class="w-full h-full object-cover rounded"
/>
</div>
<div class="flex-1">
<div class="flex items-center space-x-2">
<el-tag size="small" type="danger" class="!rounded-full"
>辟谣</el-tag
>
<h3
class="text-base font-medium hover:text-blue-600 cursor-pointer text-black"
>
{{ item.title }}
</h3>
</div>
<p class="mt-1 text-sm text-gray-500 line-clamp-2">
{{ item.desc }}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 友情链接 -->
<div class="container mx-auto px-4 mt-10 mb-10 w-[1440px]">
<div class="bg-white rounded-lg p-6 shadow-sm">
<h2 class="text-xl font-bold mb-4 text-black">友情链接</h2>
<div class="grid grid-cols-6 gap-4">
<a
v-for="(link, index) in friendLinks"
:key="index"
:href="link.url"
class="text-gray-600 hover:text-blue-600"
>
{{ link.name }}
</a>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Autoplay } from "swiper/modules";
import { useRouter } from "vue-router";
import {
VideoPlay,
Message,
Share,
Link,
Search,
Document,
} from "@element-plus/icons-vue";
const router = useRouter();
const swiperModules = [Pagination, Autoplay];
const searchQuery = ref("");
const activeNav = ref(0);
const navItems = ["首页", "新闻热点", "太原新闻", "山西新闻", "通知公告"];
const handleClick = (index: number, entry: any) => {
switch (index) {
case 0:
// router.push({ name: "PyHome" });
const newPageUrl = router.resolve({ name: "PyHome" }).href;
window.open(newPageUrl, "_blank");
break;
case 1:
break;
case 2:
break;
}
// 处理点击事件
};
const slides = [
{
image:
"https://ai-public.mastergo.com/ai/img_res/4897a9dab80e53628f1ca854d891279f.jpg",
title: "太原市召开互联网安全工作会议，部署2024年重点任务",
},
{
image:
"https://ai-public.mastergo.com/ai/img_res/8b7a009fc227cb96122e46df2f91e4bd.jpg",
title: "我市成功举办2024年网络安全宣传周活动",
},
{
image:
"https://ai-public.mastergo.com/ai/img_res/14df14e37438beb78afd9827e433a0a0.jpg",
title: "太原互联网产业发展论坛圆满落幕",
},
];
const quickEntries = [
{
title: "太原市互联网联合辟谣平台",
icon: "Message",
bg: "https://ai-public.mastergo.com/ai/img_res/36f741de94394af113bc0d3c823df49a.jpg",
},
{
title: "太原市互联网违法和不良信息举报平台",
icon: "Share",
bg: "https://ai-public.mastergo.com/ai/img_res/e3d550fe8d11531c42a774641cf3790a.jpg",
},
{
title: "网民有话说",
icon: "Link",
bg: "https://ai-public.mastergo.com/ai/img_res/c907287d38d89eb460120dc7cf6b2d17.jpg",
},
];
const latestNews = [
{
title: "太原市举办首届数字经济创新发展大会",
desc: "大会聚焦数字经济发展趋势，探讨人工智能、大数据等新技术在城市发展中的应用前景。",
date: "2024-01-15",
image:
"https://ai-public.mastergo.com/ai/img_res/5c3df44b8184cf0a53cd29c1a0133b7f.jpg",
},
{
title: '我市启动"智慧城市"建设新阶段',
desc: "计划在未来三年内完成城市数字化转型升级，打造智能交通、智慧医疗等重点项目。",
date: "2024-01-14",
image:
"https://ai-public.mastergo.com/ai/img_res/ee06f443e7bc41d264c3987e7650de69.jpg",
},
{
title: "太原市成功举办第三届网络安全技能大赛",
desc: "来自全市各大院校和企业的300多名选手参加比赛，展示网络安全攻防技能。",
date: "2024-01-13",
image:
"https://ai-public.mastergo.com/ai/img_res/38920bb1d8a7b9cc8065be10a25c1efe.jpg",
},
{
title: '太原市推出"互联网+政务服务"新举措',
desc: "新平台整合了200多项政务服务，市民足不出户即可办理多项业务。",
date: "2024-01-12",
image:
"https://ai-public.mastergo.com/ai/img_res/8507bb9bc9c2848826d89bc7ab19a969.jpg",
},
{
title: "太原互联网产业园区引进十家知名科技企业",
desc: "产业园区新引进的企业将带来近千个就业岗位，推动本地数字经济发展。",
date: "2024-01-11",
image:
"https://ai-public.mastergo.com/ai/img_res/065d985659cc9f2d37dbf9c00429ed2f.jpg",
},
];
const hotNews = [
{
title: '太原市获评"2023年度网络安全示范城市"',
date: "2024-01-13",
},
{
title: "我市开展网络安全专项整治行动",
date: "2024-01-12",
},
{
title: "太原互联网企业助力乡村振兴",
date: "2024-01-11",
},
];
const videoNews = [
{
title: "2024太原网络安全周开幕式",
cover:
"https://ai-public.mastergo.com/ai/img_res/c127709d932c688f0fd802b468fbeb1b.jpg",
},
{
title: "太原智慧城市建设成果展示",
cover:
"https://ai-public.mastergo.com/ai/img_res/04b4d2ca1d91d73dac6a0f4316b13165.jpg",
},
];
const authoritativeNews = [
{
title: "太原市网信办发布《2024年网络安全管理规定》",
date: "2024-01-15",
},
{
title: "关于加强网络信息内容生态治理的实施意见",
date: "2024-01-14",
},
{
title: "太原市互联网行业自律公约发布",
date: "2024-01-13",
},
{
title: "2024年太原市互联网发展白皮书",
date: "2024-01-12",
},
];
const rumourNews = [
{
title: '关于"太原将全面取消公交卡"的谣言说明',
desc: '近期网传"太原将全面取消公交卡"的消息不实，公交卡服务将继续保留。',
image:
"https://ai-public.mastergo.com/ai/img_res/aed0abc9ee93b7f23cba4f63bd702c60.jpg",
},
{
title: "辟谣：太原地铁工程已全面停工",
desc: "相关部门表示，太原地铁工程正在有序推进中，网传停工消息为谣言。",
image:
"https://ai-public.mastergo.com/ai/img_res/f75dddff6745c8bb45fc7828053d8b2c.jpg",
},
{
title: "澄清：关于网传医保卡系统升级消息",
desc: "针对网传医保卡系统升级将导致服务暂停的消息，市医保局进行了澄清。",
image:
"https://ai-public.mastergo.com/ai/img_res/32ff2002f36671ecf2465d6c03b3a61f.jpg",
},
];
const friendLinks = [
{ name: "太原市人民政府", url: "#" },
{ name: "山西省网信办", url: "#" },
{ name: "太原日报", url: "#" },
{ name: "山西新闻网", url: "#" },
{ name: "太原广播电视台", url: "#" },
{ name: "太原市公安局", url: "#" },
];
</script>
<style scoped>
.swiper {
--swiper-theme-color: #ffffff;
--swiper-pagination-bullet-inactive-color: #ffffff;
--swiper-pagination-bullet-inactive-opacity: 0.5;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
src/views/home/hotnews/News.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-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" },
},
]);
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/home/sxnews/ShanxiNews.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/home/tynews/TaiyuanNews.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 0 → 100644
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="w-[1440px] mx-auto">
<header class="hero-bg text-white">
<div class="container mx-auto px-8 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<h1 class="text-2xl font-bold">山西互联网联合辟谣平台</h1>
<p class="text-sm opacity-80">主办：山西省互联网信息办公室</p>
</div>
<div class="text-sm opacity-80">承办：黄河新闻网</div>
</div>
</div>
<nav class="bg-white/10 backdrop-blur-sm">
<div class="container mx-auto px-8">
<div class="flex justify-between items-center">
<div
v-for="(item, index) in menuItems"
:key="index"
class="py-4 px-6 cursor-pointer hover:bg-white/10 transition-colors"
:class="{ 'bg-white/10': activeIndex === String(index) }"
@click="activeIndex = String(index)"
>
<span class="text-white">{{ item }}</span>
</div>
</div>
</div>
</nav>
</header>
<main class="container mx-auto px-8 py-8">
<div class="bg-white rounded-lg shadow-lg p-6 mb-8">
<h2 class="text-2xl font-bold mb-4">
全国网络辟谣联动机制第三次全体会议召开
</h2>
<p class="text-gray-600 mb-4">
网络谣言是当前网上政治安全和国家安全的重要考验，是开展网上舆论工作的重要课题，是深化网络综合治理的重要内容。
</p>
<div class="flex gap-8 mb-8">
<div class="relative w-2/3 rounded-lg overflow-hidden">
<swiper
:modules="swiperModules"
:pagination="{ clickable: true }"
:navigation="true"
:autoplay="{ delay: 3000 }"
class="w-full h-full"
>
<swiper-slide v-for="(slide, index) in slides" :key="index">
<el-image :src="slide.src" fit="cover" class="w-full h-full" />
</swiper-slide>
</swiper>
</div>
<div class="w-1/3 grid grid-cols-1 gap-3 h-[450px] overflow-y-auto">
<el-card
v-for="(item, index) in quickLinks"
:key="index"
class="hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer"
shadow="hover"
>
<div
class="flex items-center gap-4 p-3 h-16 bg-gradient-to-r from-blue-50 to-white rounded-lg"
>
<el-icon :size="32" class="text-blue-600">
<component :is="item.icon" />
</el-icon>
<h4 class="font-bold text-lg text-blue-900 flex items-center">
{{ item.title }}
</h4>
</div>
</el-card>
</div>
</div>
<div class="grid grid-cols-3 gap-6">
<el-card
v-for="(section, index) in sections"
:key="index"
class="h-full"
>
<template #header>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-primary">{{
section.title
}}</span>
<el-button type="primary" text>更多 ></el-button>
</div>
</template>
<el-scrollbar height="400px">
<ul class="space-y-3">
<li
v-for="(item, itemIndex) in section.items"
:key="itemIndex"
class="flex items-center"
>
<span class="w-1 h-1 bg-gray-400 rounded-full mr-2"></span>
<el-link
:underline="false"
class="text-gray-700 hover:text-primary truncate"
>{{ item }}</el-link
>
</li>
</ul>
</el-scrollbar>
</el-card>
</div>
</div>
<div class="bg-white rounded-lg shadow-lg p-6 mt-8">
<div class="flex justify-between items-center mb-6">
<h3 class="text-xl font-bold text-primary">读图识谣</h3>
<el-button type="primary" text>更多 ></el-button>
</div>
<div class="relative">
<swiper
:modules="swiperModules"
:slidesPerView="4"
:spaceBetween="24"
:navigation="true"
:autoplay="{ delay: 3000 }"
class="service-swiper"
>
<swiper-slide v-for="(card, index) in serviceCards" :key="index">
<el-card class="h-full hover:shadow-lg transition-shadow">
<el-image
:src="card.image"
fit="cover"
class="w-full h-40 rounded mb-4"
/>
<h4 class="font-bold mb-2">{{ card.title }}</h4>
<p class="text-sm text-gray-600">{{ card.description }}</p>
</el-card>
</swiper-slide>
</swiper>
</div>
</div>
</main>
<footer class="bg-gray-100 py-8">
<div class="container mx-auto px-8">
<div class="text-center text-sm text-gray-600">
<p class="mb-2">联系电话：0351-5236042 技术支持：0351-5236044</p>
<p class="mb-2">
互联网新闻信息服务许可证：14120180001
增值电信业务经营许可证：晋B2-20060016189
</p>
<p>版权所有 © 2024 山西互联网联合辟谣平台 保留所有权利</p>
</div>
</div>
</footer>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Navigation, Autoplay } from "swiper/modules";
import {
Document,
UserFilled,
Lock,
List,
Service,
Bell,
Collection,
} from "@element-plus/icons-vue";
const activeIndex = ref("0");
const swiperModules = [Pagination, Navigation, Autoplay];
const menuItems = [
"首页",
"权威发布",
"辟谣专区",
"专家解读",
"法律法规",
"读图识谣",
];
const slides = [
{
src: "https://ai-public.mastergo.com/ai/img_res/a6c6b005094da8f76e79def3225b4ea0.jpg",
},
{
src: "https://ai-public.mastergo.com/ai/img_res/cc20fdfc4e9bcd53c4f517b03036c8a2.jpg",
},
{
src: "https://ai-public.mastergo.com/ai/img_res/40e648e87a974e8fe013b6f4b9b0ac2b.jpg",
},
];
const quickLinks = [
{ icon: Document, title: "最新辟谣" },
{ icon: UserFilled, title: "举报入口" },
{ icon: Lock, title: "安全提醒" },
{ icon: List, title: "政策法规" },
{ icon: Service, title: "在线咨询" },
{ icon: Bell, title: "举报中心" },
{ icon: Collection, title: "知识库" },
];
const sections = [
{
title: "专家解读",
items: [
"专家详解：新冠病毒变异株的特点与防护要点",
"权威专家谈饮食健康：科学认识营养补充剂",
"医学专家解读：常见慢性病的预防与管理",
"专家视角：解读最新公共卫生政策",
"心理健康专家：如何应对现代生活压力",
"环境卫生专家：空气污染与健康防护",
"运动医学专家：科学健身指南",
"营养学专家：平衡饮食的重要性",
"中医专家：传统养生之道的现代价值",
"公共卫生专家：群体免疫的科学认识",
],
},
{
title: "辟谣专区",
items: [
"辟谣：喝热水可以预防新冠病毒感染？",
"谣言粉碎：5G基站会传播病毒",
"假新闻核实：某食品添加剂致癌？",
"事实核查：网传特效药可治百病",
"辟谣：转发朋友圈可以赚钱？",
"真相：某款保健品包治百病",
"谣言终结：吃某水果可预防癌症",
"揭秘：网传养生方法的科学依据",
],
},
{
title: "法律法规",
items: [
"《中华人民共和国网络安全法》解读",
"《互联网信息服务管理办法》要点",
"《网络谣言治理规定》重点条款",
"《个人信息保护法》主要内容",
"《数据安全法》核心要义",
"《未成年人网络保护条例》解析",
"《网络信息内容生态治理规定》",
"《网络安全审查办法》要点",
"《互联网新闻信息服务管理规定》",
"《网络直播营销管理办法》解读",
],
},
];
const serviceCards = [
{
image:
"https://ai-public.mastergo.com/ai/img_res/2655e0a0acf47c07b9c8ff060c82bbc1.jpg",
title: "健康科普讲堂",
description: "权威专家为您解读健康知识",
},
{
image:
"https://ai-public.mastergo.com/ai/img_res/2f71d88aad56bf2fd7cf852bb161fa9a.jpg",
title: "食品安全专区",
description: "关注食品安全 守护健康生活",
},
{
image:
"https://ai-public.mastergo.com/ai/img_res/96a618b8d32896b05bbf19a1e237bb5c.jpg",
title: "网络安全知识",
description: "提高网络安全意识",
},
{
image:
"https://ai-public.mastergo.com/ai/img_res/7f28f51c022005811277c6aeb56a604e.jpg",
title: "法律咨询服务",
description: "专业律师在线解答",
},
{
image:
"https://ai-public.mastergo.com/ai/img_res/eca0048f8f7939e3dacd3026bdb7cebb.jpg",
title: "科技辟谣",
description: "揭穿科技谣言真相",
},
{
image:
"https://ai-public.mastergo.com/ai/img_res/067a33b74280646e216710bf650a909f.jpg",
title: "环保真相",
description: "环保谣言不再迷惑",
},
];
</script>
<style scoped>
.hero-bg {
background: linear-gradient(135deg, #001f3f, #0047ab);
}
:deep(.el-card) {
border: 1px solid rgba(0, 31, 63, 0.1);
transition: all 0.3s ease;
}
:deep(.el-scrollbar__wrap) {
overflow-x: hidden;
}
:deep(.el-card.is-hover-shadow:hover) {
box-shadow: 0 8px 16px rgba(0, 31, 63, 0.12);
transform: translateY(-2px);
}
:deep(.el-card.is-hover-shadow) {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
:deep(.el-card:hover) {
border-color: rgba(0, 31, 63, 0.3);
box-shadow: 0 12px 28px rgba(0, 31, 63, 0.15);
}
:deep(.el-card__body) {
padding: 16px;
}
:deep(.el-link.el-link--default:hover) {
color: #0047ab;
}
:deep(.service-swiper .swiper-button-prev),
:deep(.service-swiper .swiper-button-next) {
background-color: rgba(255, 255, 255, 0.9);
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
color: #001f3f;
}
:deep(.service-swiper .swiper-button-prev:after),
:deep(.service-swiper .swiper-button-next:after) {
font-size: 16px;
}
:deep(.service-swiper .swiper-button-prev) {
left: -20px;
}
:deep(.service-swiper .swiper-button-next) {
right: -20px;
}
:deep(.service-swiper .swiper-button-disabled) {
opacity: 0;
}
</style>
tailwind.config.js 0 → 100644
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: "class",
corePlugins: {
preflight: false
},
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
bg_color: "var(--el-bg-color)",
primary: "var(--el-color-primary)",
text_color_primary: "var(--el-text-color-primary)",
text_color_regular: "var(--el-text-color-regular)",
text_color_000: '#000',
text_color_333: '#333',
text_color_666: '#666',
text_color_999: '#999'
}
},
// 自定义字体(思源)
fontFamily: {
'SourceHanSansCN-Bold': "var(--font-bold)",
'SourceHanSansCN-Medium': "var(--font-medium)",
'SourceHanSansCN-Light': "var(--font-light)",
'SourceHanSansCN-Normal': "var(--font-normal)",
'SourceHanSansCN-Heavy': "var(--font-heavy)",
'SourceHanSansCN-Regular': "var(--font-regular)",
'SourceHanSansCN-Extra-light': "var(--font-extra-light)",
}
}
};
tsconfig.app.json 0 → 100644
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"paths": {
"@/*": ["./src/*"]
}
}
}
tsconfig.json 0 → 100644
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
}
]
}
tsconfig.node.json 0 → 100644
{
"extends": "@tsconfig/node22/tsconfig.json",
"include": [
"vite.config.*",
"vitest.config.*",
"cypress.config.*",
"nightwatch.conf.*",
"playwright.config.*"
],
"compilerOptions": {
"noEmit": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"module": "ESNext",
"moduleResolution": "Bundler",
"types": ["node"]
}
}
vite.config.ts 0 → 100644
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueDevTools from "vite-plugin-vue-devtools";
// https://vite.dev/config/
export default defineConfig({
plugins: [vue(), vueDevTools()],
server: {
// 是否开启 https
https: false,
// 端口号
port: 8080,
host: "0.0.0.0",
// 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy
proxy: {
"/api": {
// target: "http://localhost:8081",
// target: "http://172.16.70.52:8081",
target: "http://192.168.19.247:8081",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
"/jeeplus": {
target: "ws://192.168.1.205:8081", // 线上服务器websocket地址
ws: true,
changeOrigin: true,
},
},
cors: true,
},
// resolve: {
// alias: {
// "@": fileURLToPath(new URL("./src", import.meta.url)),
// },
// },
});
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