Skip to content

E
emergency-project
Commit 74fb72b7 by 吴春元
Options

feat: 添加搜索功能并优化页面样式 

refactor: 重构页面布局和样式

style: 更新字体和图片资源

perf: 优化页面加载性能

fix: 修复路由跳转问题

docs: 更新文档和注释

chore: 更新依赖和配置
parent 4ab41a59
Showing with 307 additions and 216 deletions
src/assets/main.css
......@@ -37,6 +37,36 @@ a,
::v-deep .el-select-dropdown__wrap {
max-height: 1.2rem ;
max-height: 1.2rem;
}
/* 全局字体 */
@font-face {
font-family: "heitizi";
src: url("/fonts/heitizi.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
/* 优化字体加载显示 */
}
/* 全局字体 */
@font-face {
font-family: "fangzheng";
src: url("/fonts/fangzheng.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
/* 优化字体加载显示 */
}
/* 全局字体 */
@font-face {
font-family: "AlibabaPuHuiTi95";
src: url("/fonts/AlibabaPuHuiTi105.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
/* 优化字体加载显示 */
}
\ No newline at end of file
src/components/footer.vue
<template>
<div class="bg-gray-50">
<!-- 页脚 -->
<footer class="bg-gray-800 text-gray-300">
<div class="container mx-auto px-4 pt-10 w-[1440px]">
<div class="grid grid-cols-3 gap-8">
<footer class="bg-[#247edb] text-gray-300 bg-gradient-to-r from-blue-900/80 via-blue-900/30 to-transparent">
<div class="container px-0 pt-5 w-[940px] mx-auto">
<div class="grid grid-cols-2 gap-2 justify-items-center">
<div>
<h3 class="text-lg font-medium mb-4">联系我们</h3>
<div class="space-y-2">
<p>地址：{{ inject("VITE_ADDRESS") }}</p>
<p>电话：{{ inject("VITE_PHONE") }}</p>
<p>邮箱：{{ inject("VITE_EMAIL") }}</p>
<!-- <p>
邮箱：<a href="mailto:{{ inject('VITE_EMAIL') }}">{{
inject("VITE_EMAIL")
}}</a>
</p> -->
<h3 class="text-lg mb-2 text-white font-bold">联系我们</h3>
<div class="space-y-1">
<p class="text-white text-[12px] font-[600]">地址：{{ inject("VITE_ADDRESS") }}</p>
<p class="text-white text-[12px] font-[600]">电话：{{ inject("VITE_PHONE") }}</p>
<p class="text-white text-[12px] font-[600]">邮箱：{{ inject("VITE_EMAIL") }}</p>
</div>
</div>
<div>
<h4 class="text-lg font-medium mb-4">主办单位</h4>
<p>{{ inject("VITE_APP_TITLE") }}</p>
<h4 class="text-lg mb-2 text-white font-bold">主办单位</h4>
<p class="text-white text-[12px] font-[600]">{{ inject("VITE_APP_TITLE") }}</p>
</div>
<div>
</div>
<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-4 pt-2 pb-5 border-t border-gray-700 text-center">
<p>Copyright © 2025 {{ inject("VITE_APP_TITLE") }} 版权所有</p>
<div class="mt-2 pt-1 pb-3 border-t border-gray-700 text-center">
<p class="text-white text-[12px] font-[600]">Copyright © {{ inject("VITE_APP_TITLE") }} @版权所有</p>
<!-- <p class="mt-2">晋ICP备12345678号-1 | 晋公网安备 14010002000001号</p> -->
</div>
</div>
......
src/layout/news.vue
<template>
<div class="bg-gray-50">
<div class="bg-container">
<!-- 顶部横幅 -->
<header class="bg-white shadow">
<div class="container mx-auto px-0 h-20 flex items-center">
<img src="@/assets/logo1.png" alt="国徽" class="h-10 mr-4" />
<div class="flex-1 flex items-center justify-between">
<h1 class="text-2xl font-bold text-black">
{{ inject("VITE_APP_TITLE") }}
</h1>
<div class="flex relative w-[360px] gap-4">
<el-input
v-model="searchQuery"
class="!rounded-full"
placeholder="搜索新闻、通知..."
:prefix-icon="Search"
@keyup.enter="handleSearch"
/>
<button
class="flex items-center px-4 py-[9px] bg-blue-500 cursor-pointer text-white rounded-[10px] hover:bg-blue-600 transition-colors whitespace-nowrap"
style="border: none"
@click="handleSearch"
>
<el-icon class="mr-1"><Search /></el-icon>
<span>搜索</span>
</button>
<header class="shadow">
<div class="container mx-auto flex items-center" style="height:180px;width: 1440px;">
<img src="@/assets/logo1.png" alt="国徽" class="h-[100px] mr-6" />
<div>
<div class="text-title text-[45px] text-white mb-[-15px]">
太原市互联网应急指挥和举报中心
</div>
<div class="text-title text-[45px] text-white">
(太原市互联网宣传研究中心)
</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)"
>
<span class="text-white">{{ item.categoryTitle }}</span>
</li>
</ul>
<nav class="text-white">
<div class="container mx-auto px-[30px]">
<div class="flex items-center justify-between h-[65px]">
<!-- 主导航菜单 -->
<ul class="flex justify-between w-full max-w-[calc(100%-320px)] h-14">
<li v-for="(item, index) in navItems" :key="index"
class="flex-1 flex items-center justify-center cursor-pointer px-4 relative transform transition-all duration-300 hover:scale-105 hover:-translate-y-2 shadow-lg hover:shadow-xl"
@click="navigateTo(index, item)">
<span class="text-white font-bold text-[20px]">{{ item.categoryTitle }}</span>
<!-- 点击在对应的选中下划线 -->
<div
class="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-[30px] h-[3px] bg-white transition-all duration-300 rounded-[10px]"
:class="{ 'opacity-100': activeNav === index, 'opacity-0': activeNav !== index }">
</div>
</li>
</ul>
<!-- 搜索框 -->
<div class="flex relative w-[240px] mr-[50px]">
<el-input v-model="searchQuery" class="!rounded-full" placeholder="搜索新闻、通知..." :prefix-icon="Search"
@keyup.enter="handleSearch">
<template #append>
<el-icon class="mr-1 text-blue-400 hover:text-blue-600 cursor-pointer" style="color: #2E5BF6;"
@click="handleSearch">
<Search />
</el-icon>
</template>
</el-input>
</div>
</div>
</div>
</nav>
<router-view></router-view>
<Footer></Footer>
<!-- 页脚 -->
<!-- <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>邮箱：te@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 lang="ts">
import { ref, watch, inject } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Message, Share, Link, Search } from "@element-plus/icons-vue";
// @ts-ignore
import { getTab } from "@/api/home/home";
// @ts-ignore
import { HLW_YJZH_JBZX } from "@/utils/config";
import { ElMessage } from "element-plus";
import Footer from "@/components/footer.vue";
......@@ -124,17 +100,50 @@ function navigateTo(index: number, item: any) {
// { path: "/home/sxnews", query: { id: item.id } },
// { path: "/home/announcements", query: { id: item.id } },
// ];
// if (index == 0) {
// router.push({
// path: "/home/home",
// query: { categoryId: item.id, categoryTitle: item.categoryTitle },
// });
// } else {
// router.push({
// path: "/home/news",
// query: { categoryId: item.id, categoryTitle: item.categoryTitle },
// });
// }
if (index == 0) {
router.push({
path: "/home/home",
query: { categoryId: item.id, categoryTitle: item.categoryTitle },
});
} else {
} else if (index == 1) {
// 通知公告
router.push({
path: "/home/news",
query: { categoryId: item.id, categoryTitle: item.categoryTitle },
});
} else if (index == 2) {
//举报专区
router.push({
path: "/home/jb",
query: { categoryId: item.id, categoryTitle: item.categoryTitle },
});
} else if (index == 3) {
//辟谣平台 -router跳转新标签页/py/pyhome
const routeUrl = router.resolve({
path: "/py/pyhome",
query: { categoryId: item.id, categoryTitle: item.categoryTitle },
});
window.open(routeUrl.href, '_blank');
} else if (index == 4) {
const routeUrl = router.resolve({
path: "/wm/wmhome",
query: { categoryId: item.id, categoryTitle: item.categoryTitle },
});
window.open(routeUrl.href, '_blank');
}
activeNav.value = index;
}
......@@ -142,15 +151,14 @@ const data = {
categoryFlag: HLW_YJZH_JBZX,
};
getTab(data).then((res) => {
getTab(data).then((res: any) => {
console.log(res);
const data: any[] = res.data.rows;
// //用data内的categorySort排序
data.sort((a, b) => a.categorySort - b.categorySort);
//将data内categoryTitle等于“轮播图”的数据过滤不在navItems.value中显示
//将data内id等于“1876561611942682626”的数据过滤不在navItems.value中显示（轮播图和后台设置的不显示标签的新闻分类）
data.unshift({ categoryTitle: "首页", categoryId: "999" });
const filterData = data.filter((item) => item.categoryTitle !== "轮播图");
const filterData = data.filter((item) => item.categoryDisplay !== "disable");
navItems.value = filterData;
setNactiveNav(navItems.value);
});
......@@ -170,10 +178,18 @@ function handleSearch() {
}
</script>
<style scoped>
.text-title {
font-family: 'AlibabaPuHuiTi95';
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bg-container {
background: url('@/assets/imgs/bg_header.jpg');
}
</style>
src/layout/py.vue
......@@ -2,31 +2,44 @@
<template>
<div class="mx-auto">
<header class="hero-bg text-white">
<div class="container mx-auto px-8 py-4">
<div class="container mx-auto px-8 py-8">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<h1 class="text-2xl font-bold cursor-pointer" @click="goToHome()">
<h1 class="text-title font-bold cursor-pointer text-[49px]" @click="goToHome()">
太原市互联网联合辟谣平台
</h1>
<!-- <p class="text-[14px] opacity-90 cursor-pointer font-bold" @click="goToHome()">
主办：{{ inject("VITE_APP_TITLE") }}
</p> -->
<!-- <p class="text-sm opacity-80">主办：山西省互联网信息办公室</p> -->
</div>
<p class="text-sm opacity-80 cursor-pointer" @click="goToHome()">
<!-- <p class="text-[14px] opacity-90 cursor-pointer font-bold" @click="goToHome()">
主办：{{ inject("VITE_APP_TITLE") }}
</p>
</p> -->
<!-- <div class="text-sm opacity-80">承办：黄河新闻网</div> -->
</div>
<p class="text-[16px] opacity-90 cursor-pointer font-bold mt-0" @click="goToHome()">
主办：{{ inject("VITE_APP_TITLE") }}
</p>
</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 navItems"
:key="index"
class="py-4 px-6 cursor-pointer hover:bg-white/10 transition-colors"
:class="{ 'bg-white/10': activeIndex === index }"
@click="navigateTo(index, item)"
>
<span class="text-white">{{ item.categoryTitle }}</span>
<div v-for="(item, index) in navItems" :key="index"
class="py-4 px-6 cursor-pointer hover:bg-white/10 transition-colors transform transition-all duration-300 hover:scale-105 hover:-translate-y-2 shadow-lg hover:shadow-xl"
:class="{ 'bg-white/10': activeIndex === index }" @click="navigateTo(index, item)">
<span class="text-white text-[16px] font-bold">{{ item.categoryTitle }}</span>
</div>
<div class="flex relative w-[240px] mr-[50px]">
<el-input v-model="searchQuery" class="!rounded-full" placeholder="搜索辟谣、权威、法律、专家..." :prefix-icon="Search"
@keyup.enter="handleSearch">
<template #append>
<el-icon class="mr-1 text-blue-400 hover:text-blue-600 cursor-pointer" style="color: #2E5BF6;"
@click="handleSearch">
<Search />
</el-icon>
</template>
</el-input>
</div>
</div>
</div>
......@@ -55,6 +68,7 @@ import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Navigation, Autoplay } from "swiper/modules";
import { useRouter, useRoute } from "vue-router";
import Footer from "@/components/footer.vue";
import { ElMessage } from "element-plus";
import {
Document,
......@@ -64,15 +78,49 @@ import {
Service,
Bell,
Collection,
Search,
} from "@element-plus/icons-vue";
import { HLW_LH_PYPT } from "@/utils/config";
import { getTab } from "@/api/home/home";
import { log } from "console";
// 定义导航项接口
interface NavItem {
categoryTitle: string;
categoryId: string;
id?: string;
categorySort?: number;
}
// 定义API响应接口
interface ApiResponse {
data: {
rows: NavItem[];
};
}
const activeIndex = ref(0);
const router = useRouter();
const route = useRoute();
const navItems = ref([]);
const navItems = ref<NavItem[]>([]);
const searchQuery = ref("");
function handleSearch() {
// 搜索功能逻辑
console.log("搜索内容:", searchQuery.value);
// 可以在这里添加路由跳转或API调用等搜索逻辑
if (searchQuery.value) {
router.push({
path: "/py/search",
query: { searchQuery: searchQuery.value },
});
} else {
ElMessage({
message: "请输入搜索内容",
type: "warning",
});
}
}
//activeNav 监听
watch(
......@@ -82,9 +130,9 @@ watch(
}
);
function setNactiveNav(navItem?: any) {
function setNactiveNav(navItem?: NavItem[]) {
navItem = navItem || navItems.value;
navItem.forEach((item: any, index: number) => {
navItem.forEach((item: NavItem, index: number) => {
console.log(item.categoryId);
if (item.id == route.query.categoryId) {
activeIndex.value = index;
......@@ -103,21 +151,21 @@ const data = {
categoryFlag: HLW_LH_PYPT,
};
getTab(data).then((res) => {
getTab(data).then((res: ApiResponse) => {
console.log(res);
const data = res.data.rows;
// //用data内的categorySort排序
data.sort((a, b) => a.categorySort - b.categorySort);
// 用data内的categorySort排序
data.sort((a: NavItem, b: NavItem) => (a.categorySort || 0) - (b.categorySort || 0));
data.unshift({ categoryTitle: "首页", categoryId: "999" });
//将data内categoryTitle等于“权威发布”和“辟谣专区”和“轮播图”的数据过滤不在navItems.value中显示
// 将data内categoryTitle等于“轮播图”的数据过滤不在navItems.value中显示
const filterData = data
.filter(
(item) =>
(item: NavItem) =>
item.categoryTitle !== "轮播图" &&
item.categoryTitle !== "山西互联网联合辟谣平台"
)
.map((item) => {
.map((item: NavItem) => {
item.categoryId = item.categoryId.toString();
return item;
});
......@@ -133,16 +181,7 @@ getTab(data).then((res) => {
}
});
function navigateTo(index: number, item: any) {
// const routes = [
// { path: "/py/pyhome" },
// { path: "/py/authority" },
// { path: "/py/rumor" },
// { path: "/py/expert" },
// { path: "/py/law" },
// { path: "/py/reading" },
// ];
// router.push(routes[index].path).catch((err) => {});
function navigateTo(index: number, item: NavItem) {
if (index == 0) {
router.push({
path: "/py/pyhome",
......@@ -159,32 +198,41 @@ function navigateTo(index: number, item: any) {
</script>
<style scoped>
.hero-bg {
background: linear-gradient(135deg, #001f3f, #0047ab);
/* background: linear-gradient(135deg, #001f3f, #0047ab); */
background: url("@/assets/imgs/py-hearder-bg.png");
}
: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);
......@@ -194,17 +242,25 @@ function navigateTo(index: number, item: any) {
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;
}
.text-title {
font-family: 'AlibabaPuHuiTi95';
}
</style>
src/layout/wm.vue
......@@ -3,73 +3,61 @@
<div class="min-h-screen bg-gray-100">
<div class="mx-auto">
<!-- Hero区域 -->
<div class="relative h-[330px] mb-8 overflow-hidden">
<div class="relative h-[350px] mb-8 overflow-hidden">
<div class="absolute inset-0">
<img
<!-- <img
src="https://ai-public.mastergo.com/ai/img_res/b69747ed7038cf3b7a5da874d0fed0ab.jpg"
class="w-full h-full object-cover object-top"
alt="banner"
/>
/> -->
<img :src="wmyhsHeaderBg" class="w-full h-full object-cover object-top" />
<div
class="absolute inset-0 bg-gradient-to-r from-blue-900/90 via-blue-900/70 to-transparent"
></div>
<div class="absolute inset-0 bg-gradient-to-r from-blue-900/80 via-blue-900/30 to-transparent"></div>
</div>
<div
class="backdrop-blur-sm rounded-lg cursor-pointer flex justify-end items-end w-auto top-0 right-0"
@click="goToHome()"
>
<p class="text-white font-bold pt-3 pr-5">
<div class="backdrop-blur-sm rounded-lg cursor-pointer flex justify-end items-end w-auto top-0 right-0"
@click="goToHome()">
<p class="text-white font-bold pt-5 pr-5 text-[20px]">
主办：{{ inject("VITE_APP_TITLE") }}
</p>
</div>
<div class="relative flex-col justify-center h-full px-12 ms-24 mt-8">
<!-- 顶部区域 -->
<div class="mb-10">
<h2
@click="goToHome()"
class="text-5xl font-bold text-white max-w-xl leading-tight cursor-pointer"
>
<div class="mb-5">
<h2 @click="goToHome()" class="text-6xl font-bold text-white cursor-pointer">
网民
<span
class="text-6xl"
style="font-family: 'STXingkai', 'KaiTi', cursive"
>有话说</span
>
<span class="text-7xl" style="font-family: 'STXingkai', 'KaiTi', cursive">有话说</span>
</h2>
</div>
<p class="text-xl text-gray-200 max-w-xl mb-6">
<p class="text-xl text-gray-200 mb-6">
用真诚的态度和专业的服务，构建政民互动的新平台
</p>
<div class="flex items-center gap-4">
<el-input
v-model="searchQuery"
placeholder="搜索您关注的问题..."
class="!w-[360px] custom-input"
@keyup.enter="handleSearch"
>
<el-input v-model="searchQuery" placeholder="搜索您关注的问题..." class="!w-[360px] custom-input"
@keyup.enter="handleSearch">
<template #prefix>
<el-icon><Search /></el-icon>
<el-icon>
<Search />
</el-icon>
</template>
</el-input>
<button
class="flex items-center px-4 py-[9px] bg-blue-500 text-white rounded-[10px] hover:bg-blue-600 transition-colors whitespace-nowrap"
style="border: none"
@click="handleSearch"
>
<el-icon class="mr-1"><Search /></el-icon>
style="border: none" @click="handleSearch">
<el-icon class="mr-1">
<Search />
</el-icon>
<span>搜索</span>
</button>
<button
@click="iMessageClick"
<button @click="iMessageClick"
class="flex items-center px-6 py-[9px] bg-white text-blue-800 rounded-[10px] hover:bg-blue-50 transition-colors !rounded-button whitespace-nowrap"
style="border: none"
>
style="border: none">
<span>我要留言</span>
<el-icon class="ml-1"><ArrowRight /></el-icon>
<el-icon class="ml-1">
<ArrowRight />
</el-icon>
</button>
</div>
</div>
......@@ -138,6 +126,8 @@ import {
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import Footer from "@/components/footer.vue";
// 引入背景图片
import wmyhsHeaderBg from "@/assets/imgs/wmyhs-header-bg.jpg";
const router = useRouter();
......@@ -187,14 +177,17 @@ function handleSearch() {
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;
}
......
src/router/index.ts
......@@ -20,6 +20,7 @@ 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 PyNewsDetail from "../views/py/detail/NewsDetail.vue";
import SearchPYList from "../views/py/search/SearchList.vue";
//网名有话说
import WmLayout from "../layout/wm.vue";
......@@ -127,6 +128,11 @@ const router = createRouter({
path: "/py/news/detail",
component: PyNewsDetail,
},
{
name: "SearchPYList",
path: "/py/search",
component: SearchPYList,
},
],
},
......
src/views/home/jb/Jb.vue
......@@ -5,10 +5,10 @@
<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>
<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>
......@@ -18,7 +18,7 @@
涉网络暴力有害信息举报专区
</h1>
<div class="flex items-center justify-between">
<span class="text-gray-500 text-sm">2023年12月20日 14:43</span>
<!-- <span class="text-gray-500 text-sm">2023年12月20日 14:43</span> -->
<!-- <div class="flex gap-4">
<el-button
type="primary"
......@@ -37,57 +37,51 @@
</div>
<!-- 主要内容区域 -->
<div class="bg-white rounded-lg shadow-sm p-8">
<div class="bg-white rounded-lg p-8 shadow-[0_0_10px_rgba(5,157,254,0.32)]">
<!-- 举报入口区域 -->
<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="flex items-center justify-center">
<img src="@/assets/imgs/bg_wing_left.png" alt="左侧翅膀" class="w-54 h-auto mr-14" />
<h2 class="text-2xl font-bold text-[#2f7ef6]">举报入口</h2>
<img src="@/assets/imgs/bg_wing_right.png" alt="右侧翅膀" class="w-54 h-auto ml-14" />
</div>
<!-- 下方灰色提示文字 -->
<div class="text-center text-gray-500 mb-6">您可选择相应入口进行举报</div>
<div class="grid grid-cols-3 gap-5">
<!-- 中央网信办举报入口 -->
<div
class="border rounded-lg p-6 flex flex-col items-center justify-center hover:shadow-md transition-shadow bg-gray-100"
@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">
<div class="border rounded-lg h-[180px] flex flex-col items-center justify-end hover:scale-90 transition-transform
bg-[url('@/assets/imgs/zywxb-bg.png')] bg-[length:100%_100%] bg-center" @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-xl font-medium text-white mb-1">中央网信办</h3>
<p class="text-white text-sm text-center mb-4">
互联网违法和不良信息举报入口
</p>
</div>
<!-- 山西省举报入口 -->
<div
class="border rounded-lg p-6 flex flex-col items-center justify-center hover:shadow-md transition-shadow bg-gray-100"
@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">
<div class="border rounded-lg h-[180px] flex flex-col items-center justify-end hover:scale-90 transition-transform
bg-[url('@/assets/imgs/sxsjbzx-bg.png')] bg-[length:100%_100%] bg-center" @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-xl font-medium text-white mb-1">
山西省举报中心
</h3>
<p class="text-gray-600 text-sm text-center">
<p class="text-white text-sm text-center mb-4">
山西省互联网违法和不良信息举报入口
</p>
</div>
<!-- 太原市举报入口 -->
<div
class="border rounded-lg p-6 flex flex-col items-center justify-center hover:shadow-md transition-shadow bg-gray-100"
@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">
<div class="border rounded-lg h-[180px] flex flex-col items-center justify-end hover:scale-90 transition-transform
bg-[url('@/assets/imgs/tysjbpt-bg.png')] bg-[length:100%_100%] bg-center" @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-xl font-medium text-white mb-1">
太原市举报平台
</h3>
<p class="text-gray-600 text-sm text-center">
<p class="text-white text-sm text-center mb-4">
太原市互联网违法和不良信息举报入口
</p>
</div>
......@@ -98,7 +92,7 @@
<div class="grid grid-cols-2 gap-8">
<!-- 左侧举报须知 -->
<div class="space-y-6">
<h2 class="text-xl font-bold mb-6 text-black">网上举报须知</h2>
<h2 class="text-xl font-bold mb-6 text-[#2f7ef6]">网上举报须知</h2>
<div>
<h3 class="font-medium mb-4 text-black">一、受理举报范围</h3>
<ol class="list-decimal list-inside space-y-2 text-gray-700">
......@@ -128,8 +122,8 @@
</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-6 border-l pl-0">
<h2 class="text-xl font-bold mb-0 text-[#2f7ef6]">联系方式</h2>
<div class="space-y-8">
<section>
<h3 class="font-medium mb-4 text-black">
......@@ -137,15 +131,21 @@
</h3>
<ul class="space-y-2 text-gray-700">
<li class="flex items-center">
<!-- <el-icon class="mr-2"><Phone /></el-icon> -->
<el-icon class="mr-2" style="color: #2f7ef6;">
<Phone />
</el-icon>
举报电话：{{ inject("VITE_PHONE") }}
</li>
<li class="flex items-center">
<!-- <el-icon class="mr-2"><Message /></el-icon> -->
<el-icon class="mr-2" style="color: #2f7ef6;">
<Message />
</el-icon>
举报传真：{{ inject("VITE_FAX") }}
</li>
<li class="flex items-center">
<!-- <el-icon class="mr-2"><Message /></el-icon> -->
<el-icon class="mr-2" style="color: #2f7ef6;">
<Message />
</el-icon>
举报邮箱：{{ inject("VITE_EMAIL") }}
</li>
</ul>
......@@ -170,6 +170,7 @@ import { ElButton, ElIcon } from "element-plus";
import { Phone, Message, ArrowRight } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { inject } from "vue";
const router = useRouter();
function goUrl(type: number) {
......
vite.config.ts
......@@ -42,7 +42,7 @@ export default defineConfig({
// 是否开启 https
https: false,
// 端口号
port: 8080,
port: 8081,
host: "0.0.0.0",
// 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy
proxy: {
......
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