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, ...@@ -37,6 +37,36 @@ a,
::v-deep .el-select-dropdown__wrap { ::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> <template>
<div class="bg-gray-50"> <div class="bg-gray-50">
<!-- 页脚 --> <!-- 页脚 -->
<footer class="bg-gray-800 text-gray-300"> <footer class="bg-[#247edb] text-gray-300 bg-gradient-to-r from-blue-900/80 via-blue-900/30 to-transparent">
<div class="container mx-auto px-4 pt-10 w-[1440px]"> <div class="container px-0 pt-5 w-[940px] mx-auto">
<div class="grid grid-cols-3 gap-8"> <div class="grid grid-cols-2 gap-2 justify-items-center">
<div> <div>
<h3 class="text-lg font-medium mb-4">联系我们</h3> <h3 class="text-lg mb-2 text-white font-bold">联系我们</h3>
<div class="space-y-2"> <div class="space-y-1">
<p>地址：{{ inject("VITE_ADDRESS") }}</p> <p class="text-white text-[12px] font-[600]">地址：{{ inject("VITE_ADDRESS") }}</p>
<p>电话：{{ inject("VITE_PHONE") }}</p> <p class="text-white text-[12px] font-[600]">电话：{{ inject("VITE_PHONE") }}</p>
<p>邮箱：{{ inject("VITE_EMAIL") }}</p> <p class="text-white text-[12px] font-[600]">邮箱：{{ inject("VITE_EMAIL") }}</p>
<!-- <p>
邮箱：<a href="mailto:{{ inject('VITE_EMAIL') }}">{{
inject("VITE_EMAIL")
}}</a>
</p> -->
</div> </div>
</div> </div>
<div> <div>
<h4 class="text-lg font-medium mb-4">主办单位</h4> <h4 class="text-lg mb-2 text-white font-bold">主办单位</h4>
<p>{{ inject("VITE_APP_TITLE") }}</p> <p class="text-white text-[12px] font-[600]">{{ inject("VITE_APP_TITLE") }}</p>
</div>
<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>
<div class="mt-4 pt-2 pb-5 border-t border-gray-700 text-center"> <div class="mt-2 pt-1 pb-3 border-t border-gray-700 text-center">
<p>Copyright © 2025 {{ inject("VITE_APP_TITLE") }} 版权所有</p> <p class="text-white text-[12px] font-[600]">Copyright © {{ inject("VITE_APP_TITLE") }} @版权所有</p>
<!-- <p class="mt-2">晋ICP备12345678号-1 | 晋公网安备 14010002000001号</p> --> <!-- <p class="mt-2">晋ICP备12345678号-1 | 晋公网安备 14010002000001号</p> -->
</div> </div>
</div> </div>
......
src/layout/news.vue
<template> <template>
<div class="bg-gray-50"> <div class="bg-container">
<!-- 顶部横幅 --> <!-- 顶部横幅 -->
<header class="bg-white shadow"> <header class="shadow">
<div class="container mx-auto px-0 h-20 flex items-center"> <div class="container mx-auto flex items-center" style="height:180px;width: 1440px;">
<img src="@/assets/logo1.png" alt="国徽" class="h-10 mr-4" /> <img src="@/assets/logo1.png" alt="国徽" class="h-[100px] mr-6" />
<div class="flex-1 flex items-center justify-between"> <div>
<h1 class="text-2xl font-bold text-black"> <div class="text-title text-[45px] text-white mb-[-15px]">
{{ inject("VITE_APP_TITLE") }} 太原市互联网应急指挥和举报中心
</h1> </div>
<div class="flex relative w-[360px] gap-4"> <div class="text-title text-[45px] text-white">
<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>
</div> </div>
</div> </div>
</div> </div>
</header> </header>
<!-- 主导航 --> <!-- 主导航 -->
<nav class="bg-blue-800 text-white"> <nav class="text-white">
<div class="container mx-auto px-4"> <div class="container mx-auto px-[30px]">
<ul class="flex space-x-8 h-14"> <div class="flex items-center justify-between h-[65px]">
<li <!-- 主导航菜单 -->
v-for="(item, index) in navItems" <ul class="flex justify-between w-full max-w-[calc(100%-320px)] h-14">
:key="index" <li v-for="(item, index) in navItems" :key="index"
class="flex items-center cursor-pointer hover:bg-blue-700 px-4" 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"
:class="{ 'bg-blue-700': activeNav === index }" @click="navigateTo(index, item)">
@click="navigateTo(index, item)" <span class="text-white font-bold text-[20px]">{{ item.categoryTitle }}</span>
> <!-- 点击在对应的选中下划线 -->
<span class="text-white">{{ item.categoryTitle }}</span> <div
</li> class="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-[30px] h-[3px] bg-white transition-all duration-300 rounded-[10px]"
</ul> :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> </div>
</nav> </nav>
<router-view></router-view> <router-view></router-view>
<Footer></Footer> <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> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch, inject } from "vue"; import { ref, watch, inject } from "vue";
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import { Message, Share, Link, Search } from "@element-plus/icons-vue"; import { Message, Share, Link, Search } from "@element-plus/icons-vue";
// @ts-ignore
import { getTab } from "@/api/home/home"; import { getTab } from "@/api/home/home";
// @ts-ignore
import { HLW_YJZH_JBZX } from "@/utils/config"; import { HLW_YJZH_JBZX } from "@/utils/config";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import Footer from "@/components/footer.vue"; import Footer from "@/components/footer.vue";
...@@ -124,17 +100,50 @@ function navigateTo(index: number, item: any) { ...@@ -124,17 +100,50 @@ function navigateTo(index: number, item: any) {
// { path: "/home/sxnews", query: { id: item.id } }, // { path: "/home/sxnews", query: { id: item.id } },
// { path: "/home/announcements", 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) { if (index == 0) {
router.push({ router.push({
path: "/home/home", path: "/home/home",
query: { categoryId: item.id, categoryTitle: item.categoryTitle }, query: { categoryId: item.id, categoryTitle: item.categoryTitle },
}); });
} else { } else if (index == 1) {
// 通知公告
router.push({ router.push({
path: "/home/news", path: "/home/news",
query: { categoryId: item.id, categoryTitle: item.categoryTitle }, 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; activeNav.value = index;
} }
...@@ -142,15 +151,14 @@ const data = { ...@@ -142,15 +151,14 @@ const data = {
categoryFlag: HLW_YJZH_JBZX, categoryFlag: HLW_YJZH_JBZX,
}; };
getTab(data).then((res) => { getTab(data).then((res: any) => {
console.log(res); console.log(res);
const data: any[] = res.data.rows; const data: any[] = res.data.rows;
// //用data内的categorySort排序 // //用data内的categorySort排序
data.sort((a, b) => a.categorySort - b.categorySort); data.sort((a, b) => a.categorySort - b.categorySort);
//将data内categoryTitle等于“轮播图”的数据过滤不在navItems.value中显示 //将data内id等于“1876561611942682626”的数据过滤不在navItems.value中显示（轮播图和后台设置的不显示标签的新闻分类）
data.unshift({ categoryTitle: "首页", categoryId: "999" }); data.unshift({ categoryTitle: "首页", categoryId: "999" });
const filterData = data.filter((item) => item.categoryTitle !== "轮播图"); const filterData = data.filter((item) => item.categoryDisplay !== "disable");
navItems.value = filterData; navItems.value = filterData;
setNactiveNav(navItems.value); setNactiveNav(navItems.value);
}); });
...@@ -170,10 +178,18 @@ function handleSearch() { ...@@ -170,10 +178,18 @@ function handleSearch() {
} }
</script> </script>
<style scoped> <style scoped>
.text-title {
font-family: 'AlibabaPuHuiTi95';
}
.line-clamp-2 { .line-clamp-2 {
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
} }
.bg-container {
background: url('@/assets/imgs/bg_header.jpg');
}
</style> </style>
src/layout/py.vue
...@@ -2,31 +2,44 @@ ...@@ -2,31 +2,44 @@
<template> <template>
<div class="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-8">
<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 cursor-pointer" @click="goToHome()"> <h1 class="text-title font-bold cursor-pointer text-[49px]" @click="goToHome()">
太原市互联网联合辟谣平台 太原市互联网联合辟谣平台
</h1> </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> --> <!-- <p class="text-sm opacity-80">主办：山西省互联网信息办公室</p> -->
</div> </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") }} 主办：{{ inject("VITE_APP_TITLE") }}
</p> </p> -->
<!-- <div class="text-sm opacity-80">承办：黄河新闻网</div> --> <!-- <div class="text-sm opacity-80">承办：黄河新闻网</div> -->
</div> </div>
<p class="text-[16px] opacity-90 cursor-pointer font-bold mt-0" @click="goToHome()">
主办：{{ inject("VITE_APP_TITLE") }}
</p>
</div> </div>
<nav class="bg-white/10 backdrop-blur-sm"> <nav class="bg-white/10 backdrop-blur-sm">
<div class="container mx-auto px-8"> <div class="container mx-auto px-8">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div <div v-for="(item, index) in navItems" :key="index"
v-for="(item, index) in navItems" 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"
:key="index" :class="{ 'bg-white/10': activeIndex === index }" @click="navigateTo(index, item)">
class="py-4 px-6 cursor-pointer hover:bg-white/10 transition-colors" <span class="text-white text-[16px] font-bold">{{ item.categoryTitle }}</span>
:class="{ 'bg-white/10': activeIndex === index }" </div>
@click="navigateTo(index, item)" <div class="flex relative w-[240px] mr-[50px]">
> <el-input v-model="searchQuery" class="!rounded-full" placeholder="搜索辟谣、权威、法律、专家..." :prefix-icon="Search"
<span class="text-white">{{ item.categoryTitle }}</span> @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> </div>
</div> </div>
...@@ -55,6 +68,7 @@ import { Swiper, SwiperSlide } from "swiper/vue"; ...@@ -55,6 +68,7 @@ import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Navigation, Autoplay } from "swiper/modules"; import { Pagination, Navigation, Autoplay } from "swiper/modules";
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import Footer from "@/components/footer.vue"; import Footer from "@/components/footer.vue";
import { ElMessage } from "element-plus";
import { import {
Document, Document,
...@@ -64,15 +78,49 @@ import { ...@@ -64,15 +78,49 @@ import {
Service, Service,
Bell, Bell,
Collection, Collection,
Search,
} from "@element-plus/icons-vue"; } from "@element-plus/icons-vue";
import { HLW_LH_PYPT } from "@/utils/config"; import { HLW_LH_PYPT } from "@/utils/config";
import { getTab } from "@/api/home/home"; 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 activeIndex = ref(0);
const router = useRouter(); const router = useRouter();
const route = useRoute(); 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 监听 //activeNav 监听
watch( watch(
...@@ -82,9 +130,9 @@ watch( ...@@ -82,9 +130,9 @@ watch(
} }
); );
function setNactiveNav(navItem?: any) { function setNactiveNav(navItem?: NavItem[]) {
navItem = navItem || navItems.value; navItem = navItem || navItems.value;
navItem.forEach((item: any, index: number) => { navItem.forEach((item: NavItem, index: number) => {
console.log(item.categoryId); console.log(item.categoryId);
if (item.id == route.query.categoryId) { if (item.id == route.query.categoryId) {
activeIndex.value = index; activeIndex.value = index;
...@@ -103,21 +151,21 @@ const data = { ...@@ -103,21 +151,21 @@ const data = {
categoryFlag: HLW_LH_PYPT, categoryFlag: HLW_LH_PYPT,
}; };
getTab(data).then((res) => { getTab(data).then((res: ApiResponse) => {
console.log(res); console.log(res);
const data = res.data.rows; const data = res.data.rows;
// //用data内的categorySort排序 // 用data内的categorySort排序
data.sort((a, b) => a.categorySort - b.categorySort); data.sort((a: NavItem, b: NavItem) => (a.categorySort || 0) - (b.categorySort || 0));
data.unshift({ categoryTitle: "首页", categoryId: "999" }); data.unshift({ categoryTitle: "首页", categoryId: "999" });
//将data内categoryTitle等于“权威发布”和“辟谣专区”和“轮播图”的数据过滤不在navItems.value中显示 // 将data内categoryTitle等于“轮播图”的数据过滤不在navItems.value中显示
const filterData = data const filterData = data
.filter( .filter(
(item) => (item: NavItem) =>
item.categoryTitle !== "轮播图" && item.categoryTitle !== "轮播图" &&
item.categoryTitle !== "山西互联网联合辟谣平台" item.categoryTitle !== "山西互联网联合辟谣平台"
) )
.map((item) => { .map((item: NavItem) => {
item.categoryId = item.categoryId.toString(); item.categoryId = item.categoryId.toString();
return item; return item;
}); });
...@@ -133,16 +181,7 @@ getTab(data).then((res) => { ...@@ -133,16 +181,7 @@ getTab(data).then((res) => {
} }
}); });
function navigateTo(index: number, item: any) { function navigateTo(index: number, item: NavItem) {
// 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) => {});
if (index == 0) { if (index == 0) {
router.push({ router.push({
path: "/py/pyhome", path: "/py/pyhome",
...@@ -159,32 +198,41 @@ function navigateTo(index: number, item: any) { ...@@ -159,32 +198,41 @@ function navigateTo(index: number, item: any) {
</script> </script>
<style scoped> <style scoped>
.hero-bg { .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) { :deep(.el-card) {
border: 1px solid rgba(0, 31, 63, 0.1); border: 1px solid rgba(0, 31, 63, 0.1);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
:deep(.el-scrollbar__wrap) { :deep(.el-scrollbar__wrap) {
overflow-x: hidden; overflow-x: hidden;
} }
:deep(.el-card.is-hover-shadow:hover) { :deep(.el-card.is-hover-shadow:hover) {
box-shadow: 0 8px 16px rgba(0, 31, 63, 0.12); box-shadow: 0 8px 16px rgba(0, 31, 63, 0.12);
transform: translateY(-2px); transform: translateY(-2px);
} }
:deep(.el-card.is-hover-shadow) { :deep(.el-card.is-hover-shadow) {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} }
:deep(.el-card:hover) { :deep(.el-card:hover) {
border-color: rgba(0, 31, 63, 0.3); border-color: rgba(0, 31, 63, 0.3);
box-shadow: 0 12px 28px rgba(0, 31, 63, 0.15); box-shadow: 0 12px 28px rgba(0, 31, 63, 0.15);
} }
:deep(.el-card__body) { :deep(.el-card__body) {
padding: 16px; padding: 16px;
} }
:deep(.el-link.el-link--default:hover) { :deep(.el-link.el-link--default:hover) {
color: #0047ab; color: #0047ab;
} }
:deep(.service-swiper .swiper-button-prev), :deep(.service-swiper .swiper-button-prev),
:deep(.service-swiper .swiper-button-next) { :deep(.service-swiper .swiper-button-next) {
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
...@@ -194,17 +242,25 @@ function navigateTo(index: number, item: any) { ...@@ -194,17 +242,25 @@ function navigateTo(index: number, item: any) {
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;
} }
: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;
} }
.text-title {
font-family: 'AlibabaPuHuiTi95';
}
</style> </style>
src/layout/wm.vue
...@@ -3,73 +3,61 @@ ...@@ -3,73 +3,61 @@
<div class="min-h-screen bg-gray-100"> <div class="min-h-screen bg-gray-100">
<div class="mx-auto"> <div class="mx-auto">
<!-- Hero区域 --> <!-- Hero区域 -->
<div class="relative h-[330px] mb-8 overflow-hidden"> <div class="relative h-[350px] mb-8 overflow-hidden">
<div class="absolute inset-0"> <div class="absolute inset-0">
<img <!-- <img
src="https://ai-public.mastergo.com/ai/img_res/b69747ed7038cf3b7a5da874d0fed0ab.jpg" src="https://ai-public.mastergo.com/ai/img_res/b69747ed7038cf3b7a5da874d0fed0ab.jpg"
class="w-full h-full object-cover object-top" class="w-full h-full object-cover object-top"
alt="banner" alt="banner"
/> /> -->
<img :src="wmyhsHeaderBg" class="w-full h-full object-cover object-top" />
<div <div class="absolute inset-0 bg-gradient-to-r from-blue-900/80 via-blue-900/30 to-transparent"></div>
class="absolute inset-0 bg-gradient-to-r from-blue-900/90 via-blue-900/70 to-transparent"
></div>
</div> </div>
<div <div class="backdrop-blur-sm rounded-lg cursor-pointer flex justify-end items-end w-auto top-0 right-0"
class="backdrop-blur-sm rounded-lg cursor-pointer flex justify-end items-end w-auto top-0 right-0" @click="goToHome()">
@click="goToHome()" <p class="text-white font-bold pt-5 pr-5 text-[20px]">
>
<p class="text-white font-bold pt-3 pr-5">
主办：{{ inject("VITE_APP_TITLE") }} 主办：{{ inject("VITE_APP_TITLE") }}
</p> </p>
</div> </div>
<div class="relative flex-col justify-center h-full px-12 ms-24 mt-8"> <div class="relative flex-col justify-center h-full px-12 ms-24 mt-8">
<!-- 顶部区域 --> <!-- 顶部区域 -->
<div class="mb-10"> <div class="mb-5">
<h2 <h2 @click="goToHome()" class="text-6xl font-bold text-white cursor-pointer">
@click="goToHome()"
class="text-5xl font-bold text-white max-w-xl leading-tight cursor-pointer"
>
网民 网民
<span <span class="text-7xl" style="font-family: 'STXingkai', 'KaiTi', cursive">有话说</span>
class="text-6xl"
style="font-family: 'STXingkai', 'KaiTi', cursive"
>有话说</span
>
</h2> </h2>
</div> </div>
<p class="text-xl text-gray-200 max-w-xl mb-6"> <p class="text-xl text-gray-200 mb-6">
用真诚的态度和专业的服务，构建政民互动的新平台 用真诚的态度和专业的服务，构建政民互动的新平台
</p> </p>
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<el-input <el-input v-model="searchQuery" placeholder="搜索您关注的问题..." class="!w-[360px] custom-input"
v-model="searchQuery" @keyup.enter="handleSearch">
placeholder="搜索您关注的问题..."
class="!w-[360px] custom-input"
@keyup.enter="handleSearch"
>
<template #prefix> <template #prefix>
<el-icon><Search /></el-icon> <el-icon>
<Search />
</el-icon>
</template> </template>
</el-input> </el-input>
<button <button
class="flex items-center px-4 py-[9px] bg-blue-500 text-white rounded-[10px] hover:bg-blue-600 transition-colors whitespace-nowrap" 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" style="border: none" @click="handleSearch">
@click="handleSearch" <el-icon class="mr-1">
> <Search />
<el-icon class="mr-1"><Search /></el-icon> </el-icon>
<span>搜索</span> <span>搜索</span>
</button> </button>
<button <button @click="iMessageClick"
@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" 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> <span>我要留言</span>
<el-icon class="ml-1"><ArrowRight /></el-icon> <el-icon class="ml-1">
<ArrowRight />
</el-icon>
</button> </button>
</div> </div>
</div> </div>
...@@ -138,6 +126,8 @@ import { ...@@ -138,6 +126,8 @@ import {
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import Footer from "@/components/footer.vue"; import Footer from "@/components/footer.vue";
// 引入背景图片
import wmyhsHeaderBg from "@/assets/imgs/wmyhs-header-bg.jpg";
const router = useRouter(); const router = useRouter();
...@@ -187,14 +177,17 @@ function handleSearch() { ...@@ -187,14 +177,17 @@ function handleSearch() {
box-shadow: none; box-shadow: none;
border: none; border: none;
} }
.custom-select :deep(.el-input__wrapper) { .custom-select :deep(.el-input__wrapper) {
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
box-shadow: none; box-shadow: none;
border: none; border: none;
} }
.custom-input :deep(.el-input__inner) { .custom-input :deep(.el-input__inner) {
height: 42px; height: 42px;
} }
.custom-select :deep(.el-input__inner) { .custom-select :deep(.el-input__inner) {
height: 42px; height: 42px;
} }
......
src/router/index.ts
...@@ -20,6 +20,7 @@ import Expert from "../views/py/expert/Expert.vue"; ...@@ -20,6 +20,7 @@ import Expert from "../views/py/expert/Expert.vue";
import Law from "../views/py/law/Law.vue"; import Law from "../views/py/law/Law.vue";
import Reading from "../views/py/reading/Reading.vue"; import Reading from "../views/py/reading/Reading.vue";
import PyNewsDetail from "../views/py/detail/NewsDetail.vue"; import PyNewsDetail from "../views/py/detail/NewsDetail.vue";
import SearchPYList from "../views/py/search/SearchList.vue";
//网名有话说 //网名有话说
import WmLayout from "../layout/wm.vue"; import WmLayout from "../layout/wm.vue";
...@@ -127,6 +128,11 @@ const router = createRouter({ ...@@ -127,6 +128,11 @@ const router = createRouter({
path: "/py/news/detail", path: "/py/news/detail",
component: PyNewsDetail, component: PyNewsDetail,
}, },
{
name: "SearchPYList",
path: "/py/search",
component: SearchPYList,
},
], ],
}, },
......
src/views/home/jb/Jb.vue
...@@ -5,10 +5,10 @@ ...@@ -5,10 +5,10 @@
<div class="w-[1440px] mx-auto px-0 py-8"> <div class="w-[1440px] mx-auto px-0 py-8">
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div class="flex items-center text-sm text-gray-500 mb-5"> <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 to="/" class="text-gray-500 hover:text-blue-500">首页</router-link>
>首页</router-link <el-icon class="mx-2">
> <ArrowRight />
<el-icon class="mx-2"><ArrowRight /></el-icon> </el-icon>
<span class="text-gray-900">太原市互联网违法和不良信息举报平台</span> <span class="text-gray-900">太原市互联网违法和不良信息举报平台</span>
</div> </div>
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
涉网络暴力有害信息举报专区 涉网络暴力有害信息举报专区
</h1> </h1>
<div class="flex items-center justify-between"> <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"> <!-- <div class="flex gap-4">
<el-button <el-button
type="primary" type="primary"
...@@ -37,57 +37,51 @@ ...@@ -37,57 +37,51 @@
</div> </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"> <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 <div class="border rounded-lg h-[180px] flex flex-col items-center justify-end hover:scale-90 transition-transform
class="border rounded-lg p-6 flex flex-col items-center justify-center hover:shadow-md transition-shadow bg-gray-100" bg-[url('@/assets/imgs/zywxb-bg.png')] bg-[length:100%_100%] bg-center" @click="goUrl(1)">
@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" /> -->
<img <h3 class="text-xl font-medium text-white mb-1">中央网信办</h3>
src="https://ai-public.mastergo.com/ai/img_res/57ebde68f473e914c107e3a025660439.jpg" <p class="text-white text-sm text-center mb-4">
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> </p>
</div> </div>
<!-- 山西省举报入口 --> <!-- 山西省举报入口 -->
<div <div class="border rounded-lg h-[180px] flex flex-col items-center justify-end hover:scale-90 transition-transform
class="border rounded-lg p-6 flex flex-col items-center justify-center hover:shadow-md transition-shadow bg-gray-100" bg-[url('@/assets/imgs/sxsjbzx-bg.png')] bg-[length:100%_100%] bg-center" @click="goUrl(2)">
@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" /> -->
<img <h3 class="text-xl font-medium text-white mb-1">
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> </h3>
<p class="text-gray-600 text-sm text-center"> <p class="text-white text-sm text-center mb-4">
山西省互联网违法和不良信息举报入口 山西省互联网违法和不良信息举报入口
</p> </p>
</div> </div>
<!-- 太原市举报入口 --> <!-- 太原市举报入口 -->
<div <div class="border rounded-lg h-[180px] flex flex-col items-center justify-end hover:scale-90 transition-transform
class="border rounded-lg p-6 flex flex-col items-center justify-center hover:shadow-md transition-shadow bg-gray-100" bg-[url('@/assets/imgs/tysjbpt-bg.png')] bg-[length:100%_100%] bg-center" @click="goUrl(3)">
@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" /> -->
<img <h3 class="text-xl font-medium text-white mb-1">
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> </h3>
<p class="text-gray-600 text-sm text-center"> <p class="text-white text-sm text-center mb-4">
太原市互联网违法和不良信息举报入口 太原市互联网违法和不良信息举报入口
</p> </p>
</div> </div>
...@@ -98,7 +92,7 @@ ...@@ -98,7 +92,7 @@
<div class="grid grid-cols-2 gap-8"> <div class="grid grid-cols-2 gap-8">
<!-- 左侧举报须知 --> <!-- 左侧举报须知 -->
<div class="space-y-6"> <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> <div>
<h3 class="font-medium mb-4 text-black">一、受理举报范围</h3> <h3 class="font-medium mb-4 text-black">一、受理举报范围</h3>
<ol class="list-decimal list-inside space-y-2 text-gray-700"> <ol class="list-decimal list-inside space-y-2 text-gray-700">
...@@ -128,8 +122,8 @@ ...@@ -128,8 +122,8 @@
</div> </div>
<!-- 右侧联系方式 --> <!-- 右侧联系方式 -->
<div class="space-y-8 border-l pl-8"> <div class="space-y-6 border-l pl-0">
<h2 class="text-xl font-bold mb-6 text-black">联系方式</h2> <h2 class="text-xl font-bold mb-0 text-[#2f7ef6]">联系方式</h2>
<div class="space-y-8"> <div class="space-y-8">
<section> <section>
<h3 class="font-medium mb-4 text-black"> <h3 class="font-medium mb-4 text-black">
...@@ -137,15 +131,21 @@ ...@@ -137,15 +131,21 @@
</h3> </h3>
<ul class="space-y-2 text-gray-700"> <ul class="space-y-2 text-gray-700">
<li class="flex items-center"> <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") }} 举报电话：{{ inject("VITE_PHONE") }}
</li> </li>
<li class="flex items-center"> <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") }} 举报传真：{{ inject("VITE_FAX") }}
</li> </li>
<li class="flex items-center"> <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") }} 举报邮箱：{{ inject("VITE_EMAIL") }}
</li> </li>
</ul> </ul>
...@@ -170,6 +170,7 @@ import { ElButton, ElIcon } from "element-plus"; ...@@ -170,6 +170,7 @@ import { ElButton, ElIcon } from "element-plus";
import { Phone, Message, ArrowRight } from "@element-plus/icons-vue"; import { Phone, Message, ArrowRight } from "@element-plus/icons-vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { inject } from "vue"; import { inject } from "vue";
const router = useRouter(); const router = useRouter();
function goUrl(type: number) { function goUrl(type: number) {
......
vite.config.ts
...@@ -42,7 +42,7 @@ export default defineConfig({ ...@@ -42,7 +42,7 @@ export default defineConfig({
// 是否开启 https // 是否开启 https
https: false, https: false,
// 端口号 // 端口号
port: 8080, port: 8081,
host: "0.0.0.0", host: "0.0.0.0",
// 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy // 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy
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