Skip to content

E
emergency-project
Commit af7382ab by York
Options

部分代码提交

parent 5beeac2e
Showing with 723 additions and 420 deletions
src/api/wm/wm.js 0 → 100644
import request from "@/utils/request";
// 热点留言列表
export function getHotList(data) {
return request({
url: "/cms/content/list",
method: "get",
params: data,
});
}
// 最新回复列表
export function getRecoverList(data) {
return request({
url: "/cms/content/list",
method: "get",
params: data,
});
}
// 我要留言
export function getWantMessage(data) {
return request({
url: "/cms/content/list",
method: "post",
params: data,
});
}
src/components/breadcrumb/BreadCrumb.vue 0 → 100644
<template>
<div class="mb-4">
<el-breadcrumb :separator-class="'el-icon-arrow-right'">
<el-breadcrumb-item
v-for="(item, index) in breadcrumbItems"
:key="index"
:to="{ path: item.path }"
>
{{ item.title }}
</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const props = defineProps({
breadcrumbItems: Array,
});
</script>
<style lang="scss" scoped></style>
src/components/news/DetailRight.vue → src/components/news/PyNewsList.vue
<!-- 代码已包含 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="container mx-auto px-0 py-5 w-[1440px]">
<div class="flex gap-6">
<div class="flex-1">
<div class="bg-white rounded-lg shadow-sm">
......@@ -12,7 +12,11 @@
@click="getToDetail(news.id)"
>
<div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg">
<img :src="news.images" class="w-full h-full object-cover" />
<el-image
class="w-full h-full object-cover"
:src="news.images"
fit="fill"
/>
</div>
<div class="flex-grow px-6">
<h2
......@@ -38,18 +42,28 @@
</span>
</div>
</div>
<!-- <div class="w-24 flex-shrink-0 text-right">
<div class="w-24 flex-shrink-0 text-right text-blue-500">
<el-tag
:type="news.category.type"
:type="news.contentTags"
size="small"
class="whitespace-nowrap"
>
{{ news.category.name }}
{{ news.contentTags }}
</el-tag>
</div> -->
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<!-- <el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400"
>
</el-pagination> -->
<el-pagination
v-model:current-page="pageNo"
v-model:page-size="pageSize"
......@@ -62,47 +76,31 @@
/>
</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 pyNews"
:key="index"
class="group cursor-pointer"
@click="getToDetail(item.id)"
>
<div
class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ item.contentTitle }}
</div>
<div class="text-xs text-gray-500 mt-1">
{{ item.contentHit }} 阅读
</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 zjNews"
v-for="(item, index) in tyNews"
:key="index"
class="group cursor-pointer"
@click="getToDetail(item.id)"
>
<div class="h-32 mb-2 overflow-hidden rounded-lg">
<img :src="item.images" class="w-full h-full object-cover" />
<!-- <el-image
class="w-full h-full object-cover"
:src="item.images"
:fit="fit"
></el-image> -->
<img
:src="item.images"
: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"
......@@ -112,28 +110,24 @@
</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>
法律法规
<el-icon class="mr-2 text-orange-500"><Bell /></el-icon>
通知公告
</h2>
<div class="space-y-4">
<div class="space-y-3">
<div
v-for="(item, index) in flNews"
v-for="(item, index) in announcements"
:key="index"
class="group cursor-pointer"
class="flex items-center space-x-2 group cursor-pointer"
@click="getToDetail(item.id)"
>
<div class="h-32 mb-2 overflow-hidden rounded-lg">
<img :src="item.images" class="w-full h-full object-cover" />
</div>
<div
class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
<el-tag size="small" :type="item.type">公告 </el-tag>
<span
class="text-sm group-hover:text-blue-600 flex-1 line-clamp-1 text-black"
>{{ item.contentTitle }}</span
>
{{ item.contentTitle }}
</div>
</div>
</div>
</div>
......@@ -144,6 +138,8 @@
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { getNewsList } from "@/api/home/news/list";
import { baseImageUrl, rdxw, tyxw, tzgg } from "@/utils/config";
import {
Clock,
Document,
......@@ -153,10 +149,7 @@ import {
Bell,
ArrowRight,
} from "@element-plus/icons-vue";
import { getNewsList } from "@/api/home/news/list";
import { baseImageUrl, pyzq, qwfb, zjjd, flfg } from "@/utils/config";
import { useRouter, useRoute } from "vue-router";
import DetailRight from "@/components/news/DetailRight.vue";
const router = useRouter();
const route = useRoute();
......@@ -174,16 +167,15 @@ const handleCurrentChange = (val: number) => {
getList(pageSize.value, pageNo.value);
};
const newsList = ref([]);
const pyNews = ref([]);
const zjNews = ref([]);
const flNews = ref([]);
const tyNews = ref([]);
const announcements = ref([]);
getList(10, 1);
getTyNewsList(3, 1);
//获取权威发布
function getList(pageSize: number, pageNo: number) {
//获取太原新闻
function getTyNewsList(pageSize: number, pageNo: number) {
const datas = {
contentType: qwfb,
contentType: tyxw,
pageSize: pageSize,
pageNo: pageNo,
};
......@@ -195,18 +187,18 @@ function getList(pageSize: number, pageNo: number) {
item.images = baseImageUrl(JSON.parse(item.contentImg)[0].path);
}
});
newsList.value = rowsList;
tyNews.value = rowsList;
});
}
getPyList();
getTzGgNewsList(5, 1);
//获取辟谣专区
function getPyList() {
//获取通知公告
function getTzGgNewsList(pageSize: number, pageNo: number) {
const datas = {
contentType: pyzq,
pageSize: 5,
pageNo: 1,
contentType: tzgg,
pageSize: pageSize,
pageNo: pageNo,
};
getNewsList(datas).then((response) => {
const data = response.data;
......@@ -216,48 +208,38 @@ function getPyList() {
item.images = baseImageUrl(JSON.parse(item.contentImg)[0].path);
}
});
pyNews.value = rowsList;
announcements.value = rowsList;
});
}
getZjList();
getList(pageSize.value, pageNo.value);
//获取专家解读
function getZjList() {
//获取新闻热点列表
function getList(pageSize: number, pageNo: number) {
// newsList.value = [];
const datas = {
contentType: zjjd,
pageSize: 2,
pageNo: 1,
contentType: rdxw,
pageSize: pageSize,
pageNo: pageNo,
};
getNewsList(datas).then((response) => {
const data = response.data;
const rowsList = data.rows;
rowsList.forEach((item: any) => {
if (item.contentImg) {
item.images = baseImageUrl(JSON.parse(item.contentImg)[0].path);
}
});
zjNews.value = rowsList;
});
}
getFlList();
//获取法律法规
function getFlList() {
const datas = {
contentType: flfg,
pageSize: 2,
pageNo: 1,
};
getNewsList(datas).then((response) => {
flNews.value = response.data.rows;
total.value = data.total;
newsList.value = rowsList;
// console.log(newsList.value);
});
}
function getToDetail(id: number) {
router.push({
path: "/py/news/detail",
path: "/home/news/detail",
query: {
type: 1,
id: id,
......
src/components/py/NewsList.vue
......@@ -2,16 +2,8 @@
<template>
<div class="min-h-screen bg-gray-50">
<div class="container mx-auto px-4 py-8 w-[1440px]">
<div
class="flex items-center text-sm text-gray-500 mb-5"
v-if="homeMoreType == '-1'"
>
<router-link to="/py/pyhome" class="text-gray-500 hover:text-blue-500"
>首页</router-link
>
<el-icon class="mx-2"><ArrowRight /></el-icon>
<span class="text-gray-900">{{ getTitleLink() }}</span>
</div>
<bread-crumb :breadcrumbItems="breadcrumbItems" />
<div class="flex gap-6">
<div class="flex-1">
<div class="bg-white rounded-lg shadow-sm">
......@@ -167,6 +159,7 @@ import { getNewsList } from "@/api/home/news/list";
import { baseImageUrl, pyzq, qwfb, zjjd, flfg } from "@/utils/config";
import { useRouter, useRoute } from "vue-router";
import { ca } from "element-plus/es/locales.mjs";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
const router = useRouter();
const route = useRoute();
......@@ -174,6 +167,23 @@ const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);
const props = defineProps({
title: String,
pathType: String,
type0: String,
type1: String,
type2: String,
type3: String,
title1: String,
title2: String,
title3: String,
});
const breadcrumbItems = ref([
{ title: "首页", path: "/py/pyhome" },
{ title: props.title },
]);
const handleSizeChange = (val: number) => {
pageSize.value = val;
pageNo.value = pageNo.value;
......@@ -187,31 +197,6 @@ const list = ref([]);
const list1 = ref([]);
const list2 = ref([]);
const list3 = ref([]);
const props = defineProps({
typePage: String,
type0: String,
type1: String,
type2: String,
type3: String,
title1: String,
title2: String,
title3: String,
homeMoreType: String,
});
function getTitleLink() {
switch (props.typePage) {
case "3": {
return "专家解读";
}
case "2": {
return "辟谣专区";
}
case "4": {
return "法律法规";
}
}
}
getList(10, 1);
getList1();
......@@ -297,12 +282,14 @@ function getToDetail(id: number) {
router.push({
path: "/py/news/detail",
query: {
type: props.typePage,
title: props.title,
pathType: props.pathType,
type1: props.type1,
type2: props.type2,
title1: props.title1,
title2: props.title2,
id: id,
page: route.query.page,
},
});
}
......
src/layout/news.vue
......@@ -12,13 +12,23 @@
<h1 class="text-2xl font-bold text-black">
太原市互联网应急指挥和举报中心
</h1>
<div class="relative w-[360px]">
<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 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>
......@@ -73,24 +83,14 @@
</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";
import { Message, Share, Link, Search } from "@element-plus/icons-vue";
import { getTab } from "@/api/home/home";
import { HLW_YJZH_JBZX } from "@/utils/config";
import { ElMessage } from "element-plus";
const router = useRouter();
const swiperModules = [Pagination, Autoplay];
const searchQuery = ref("");
const activeNav = ref(0);
// const navItems = ["首页", "新闻热点", "太原新闻", "山西新闻", "通知公告"];
const navItems = ref([]);
const data = {
......@@ -119,32 +119,16 @@ function navigateTo(index, item) {
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",
},
];
function handleSearch() {
if (searchQuery.value) {
router.push({ path: "/home/search", query: { searchQuery: searchQuery.value } });
} else {
ElMessage({
message: "请输入搜索内容",
type: "warning",
});
}
}
</script>
<style scoped>
.line-clamp-2 {
......
src/layout/py.vue
......@@ -15,13 +15,13 @@
<div class="container mx-auto px-8">
<div class="flex justify-between items-center">
<div
v-for="(item, index) in menuItems"
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)"
>
<span class="text-white">{{ item }}</span>
<span class="text-white">{{ item.categoryTitle }}</span>
</div>
</div>
</div>
......@@ -57,17 +57,31 @@ import {
Bell,
Collection,
} from "@element-plus/icons-vue";
import { HLW_LH_PYPT } from "@/utils/config";
import { getTab } from "@/api/home/home";
const activeIndex = ref("0");
const router = useRouter();
const swiperModules = [Pagination, Navigation, Autoplay];
const menuItems = [
"首页",
"权威发布",
"辟谣专区",
"专家解读",
"法律法规",
"读图识谣",
];
const navItems = ref([]);
const data = {
categoryFlag: HLW_LH_PYPT,
};
getTab(data).then((res) => {
console.log(res);
const data = res.data.rows;
// //用data内的categorySort排序
data.sort((a, b) => a.categorySort - b.categorySort);
//将data内categoryTitle等于“权威发布”和“辟谣专区”和“轮播图”的数据过滤不在navItems.value中显示
const filterData = data.filter(
(item) =>
item.categoryTitle !== "轮播图" &&
item.categoryTitle !== "山西互联网联合辟谣平台"
);
navItems.value = filterData;
});
function navigateTo(index) {
const routes = [
......@@ -81,109 +95,6 @@ function navigateTo(index) {
router.push(routes[index].path).catch((err) => {});
activeIndex.value = index;
}
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 {
......
src/layout/wm.vue
......@@ -45,15 +45,18 @@
<el-icon><Search /></el-icon>
</template>
</el-input>
<button
class="flex items-center px-4 py-[9px] bg-blue-500 text-white hover:bg-blue-600 transition-colors !rounded-button whitespace-nowrap"
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"
>
<el-icon class="mr-1"><Search /></el-icon>
<span>搜索</span>
</button>
<button
@click="iMessageClick"
class="flex items-center px-6 py-[9px] bg-white text-blue-800 hover:bg-blue-50 transition-colors !rounded-button whitespace-nowrap"
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"
>
<span>我要留言</span>
<el-icon class="ml-1"><ArrowRight /></el-icon>
......
src/router/index.ts
......@@ -9,6 +9,7 @@ import ShanxiNews from "../views/home/sxnews/ShanxiNews.vue";
import Announcements from "../views/home/announcements/Announcements.vue";
import Jb from "../views/home/jb/Jb.vue";
import NewsDetail from "../views/home/detail/NewsDetail.vue";
import SearchList from "../views/home/search/SearchList.vue";
//辟谣
import PyLayout from "../layout/py.vue";
......@@ -73,6 +74,11 @@ const router = createRouter({
path: "/home/news/detail",
component: NewsDetail,
},
{
name: "SearchList",
path: "/home/search",
component: SearchList,
},
],
},
{
......
src/utils/config.js
......@@ -23,12 +23,13 @@ export const PY_ZQ_ID = "1876540606213939201"; //辟谣专区
export const LBT_ID = "1876561611942682626"; //轮播图
//文章类型
export const lbt = "lbt"; // 轮播图
export const yjjblbt = "yjjblbt"; // 轮播图
export const rdxw = "rdxw"; // 热点新闻
export const tyxw = "tyxw"; // 太原新闻
export const sxxw = "sxxw"; // 山西新闻
export const tzgg = "tzgg"; // 通知公告
export const lhpylbt = "lhpylbt"; // 轮播图
export const qwfb = "qwfb"; // 权威发布
export const pyzq = "pyzq"; // 辟谣专区
export const zjjd = "zjjd"; // 专家解读
......
src/views/home/announcements/Announcements.vue
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="min-h-screen bg-gray-50">
<div class="container mx-auto px-0 py-5 w-[1440px]">
<div class="container mx-auto px-4 py-8 w-[1440px]">
<bread-crumb :breadcrumbItems="breadcrumbItems" />
<div class="flex gap-6">
<div class="flex-1">
<!-- 列表区域 -->
......@@ -117,6 +118,7 @@ import { Search, Refresh, View } from "@element-plus/icons-vue";
import { getNewsList } from "@/api/home/news/list";
import { useRouter, useRoute } from "vue-router";
import { baseImageUrl, rdxw, sxxw, tzgg, tyxw } from "@/utils/config";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
const router = useRouter();
const route = useRoute();
......@@ -129,6 +131,10 @@ const total = ref(100);
const tableData = ref([]);
const tyNews = ref([]);
const announcements = ref([]);
const breadcrumbItems = ref([
{ title: "首页", path: "/home/home" },
{ title: "通知公告" },
]);
const handleSizeChange = (val: number) => {
pageSize.value = val;
......@@ -165,6 +171,8 @@ function goToDetail(id: number) {
router.push({
path: "/home/news/detail",
query: {
title: "通知公告",
titlePath: "/home/announcements",
type: 4,
id: id,
},
......
src/views/home/detail/NewsDetail.vue
<template>
<div class="min-h-screen bg-gray-50">
<div class="w-[1440px] mx-auto px-0 py-5">
<div class="flex items-center text-sm text-gray-500 mb-2">
<router-link
:to="toRoute()"
class="text-gray-500 hover:text-blue-500"
>{{ toRouteName() }}</router-link
>
<el-icon class="mx-2"><ArrowRight /></el-icon>
<span class="text-gray-900">新闻详情</span>
</div>
<div class="container mx-auto px-4 py-8 w-[1440px]">
<bread-crumb
:breadcrumbItems="
route.query.titlePath == '-1' ? breadcrumbItems2 : breadcrumbItems
"
/>
<!-- 主要内容区 -->
<div class="grid grid-cols-3 gap-8">
<!-- 左侧主要新闻内容 -->
......@@ -117,10 +113,22 @@ import {
TZ_GG_ID,
} from "@/utils/config";
import { getNewsList } from "@/api/home/news/list";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
const route = useRoute();
const router = useRouter();
const breadcrumbItems = ref([
{ title: "首页", path: "/home/home" },
{ title: route.query.title, path: route.query.titlePath },
{ title: "详情", path: "" },
]);
const breadcrumbItems2 = ref([
{ title: "首页", path: "/home/home" },
{ title: "详情", path: "" },
]);
function toRouteName() {
switch (route.query.type) {
case "0":
......
src/views/home/home/HomeView.vue
......@@ -160,7 +160,7 @@
</div>
</div>
<!-- 权威发布与辟谣专区 -->
<div class="container mx-auto px-4 mt-0 w-[1440px]">
<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">
......@@ -276,7 +276,7 @@ import {
sxxw,
tzgg,
tyxw,
lbt,
yjjblbt,
pyzq,
qwfb,
} from "@/utils/config";
......@@ -285,7 +285,6 @@ 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:
......@@ -336,6 +335,7 @@ function goToDetail(id: number) {
router.push({
path: "/home/news/detail",
query: {
titlePath: "-1",
type: 0,
id: id,
},
......@@ -409,7 +409,7 @@ getLbtList(5, 1);
//获取首页轮播图
function getLbtList(pageSize: number, pageNo: number) {
const datas = {
contentType: lbt,
contentType: yjjblbt,
pageSize: pageSize,
pageNo: pageNo,
};
......
src/views/home/hotnews/News.vue
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="min-h-screen bg-gray-50">
<div class="container mx-auto px-0 py-5 w-[1440px]">
<div class="container mx-auto px-4 py-8 w-[1440px]">
<bread-crumb :breadcrumbItems="breadcrumbItems" />
<div class="flex gap-6">
<div class="flex-1">
<div class="bg-white rounded-lg shadow-sm">
......@@ -150,12 +152,17 @@ import {
ArrowRight,
} from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
const router = useRouter();
const route = useRoute();
const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);
const breadcrumbItems = ref([
{ title: "首页", path: "/home/home" },
{ title: "热点新闻" },
]);
const handleSizeChange = (val: number) => {
pageSize.value = val;
......@@ -241,6 +248,8 @@ function getToDetail(id: number) {
router.push({
path: "/home/news/detail",
query: {
title: "热点新闻",
titlePath: "/home/news",
type: 1,
id: id,
},
......
src/views/home/search/SearchList.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]">
<bread-crumb :breadcrumbItems="breadcrumbItems" />
<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"
@click="getToDetail(news.id)"
>
<div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg">
<el-image
class="w-full h-full object-cover"
:src="news.images"
fit="fill"
/>
</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.contentTitle }}
</h2>
<p class="text-gray-600 text-sm line-clamp-2">
{{ news.contentDescription }}
</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.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Document /></el-icon>
{{ news.contentTags }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ news.contentHit }}
</span>
</div>
</div>
<div class="w-24 flex-shrink-0 text-right text-blue-500">
<el-tag
:type="news.contentTags"
size="small"
class="whitespace-nowrap"
>
{{ news.contentTags }}
</el-tag>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<!-- <el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400"
>
</el-pagination> -->
<el-pagination
v-model:current-page="pageNo"
v-model:page-size="pageSize"
background
:total="total"
:page-sizes="[10, 20, 30, 40]"
layout="prev, pager, next"
@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 tyNews"
:key="index"
class="group cursor-pointer"
@click="getToDetail(item.id)"
>
<div class="h-32 mb-2 overflow-hidden rounded-lg">
<!-- <el-image
class="w-full h-full object-cover"
:src="item.images"
:fit="fit"
></el-image> -->
<img
:src="item.images"
: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.contentTitle }}
</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"
@click="getToDetail(item.id)"
>
<el-tag size="small" :type="item.type">公告 </el-tag>
<span
class="text-sm group-hover:text-blue-600 flex-1 line-clamp-1 text-black"
>{{ item.contentTitle }}</span
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { getNewsList } from "@/api/home/news/list";
import { baseImageUrl, rdxw, tyxw, tzgg } from "@/utils/config";
import {
Clock,
Document,
View,
Star,
Location,
Bell,
ArrowRight,
} from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
const router = useRouter();
const route = useRoute();
const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);
//搜索内容
const searchQuery = route.query.searchQuery;
const breadcrumbItems = ref([
{ title: "首页", path: "/home/home" },
{ title: "搜索结果" },
]);
const handleSizeChange = (val: number) => {
pageSize.value = val;
pageNo.value = pageNo.value;
};
const handleCurrentChange = (val: number) => {
pageSize.value = pageSize.value;
pageNo.value = val;
getList(pageSize.value, pageNo.value);
};
const newsList = ref([]);
const tyNews = ref([]);
const announcements = ref([]);
getTyNewsList(3, 1);
//获取太原新闻
function getTyNewsList(pageSize: number, pageNo: number) {
const datas = {
contentType: tyxw,
pageSize: pageSize,
pageNo: pageNo,
};
getNewsList(datas).then((response) => {
const data = response.data;
const rowsList = data.rows;
rowsList.forEach((item: any) => {
if (item.contentImg) {
item.images = baseImageUrl(JSON.parse(item.contentImg)[0].path);
}
});
tyNews.value = rowsList;
});
}
getTzGgNewsList(5, 1);
//获取通知公告
function getTzGgNewsList(pageSize: number, pageNo: number) {
const datas = {
contentType: tzgg,
pageSize: pageSize,
pageNo: pageNo,
};
getNewsList(datas).then((response) => {
const data = response.data;
const rowsList = data.rows;
rowsList.forEach((item: any) => {
if (item.contentImg) {
item.images = baseImageUrl(JSON.parse(item.contentImg)[0].path);
}
});
announcements.value = rowsList;
});
}
getList(pageSize.value, pageNo.value);
//获取新闻热点列表
function getList(pageSize: number, pageNo: number) {
// newsList.value = [];
const datas = {
contentType: rdxw,
pageSize: pageSize,
pageNo: pageNo,
};
getNewsList(datas).then((response) => {
const data = response.data;
const rowsList = data.rows;
rowsList.forEach((item: any) => {
if (item.contentImg) {
item.images = baseImageUrl(JSON.parse(item.contentImg)[0].path);
}
});
total.value = data.total;
newsList.value = rowsList;
// console.log(newsList.value);
});
}
function getToDetail(id: number) {
router.push({
path: "/home/news/detail",
query: {
title: "搜索结果",
titlePath: "/home/search",
type: 1,
id: id,
},
});
}
</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
......@@ -2,6 +2,8 @@
<template>
<div class="min-h-screen bg-gray-50">
<div class="container mx-auto px-4 py-8 w-[1440px]">
<bread-crumb :breadcrumbItems="breadcrumbItems" />
<div class="flex gap-6">
<div class="flex-1">
<div class="bg-white rounded-lg shadow-sm">
......@@ -133,6 +135,7 @@ import {
ArrowRight,
} from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
const router = useRouter();
const route = useRoute();
......@@ -140,6 +143,11 @@ const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);
const breadcrumbItems = ref([
{ title: "首页", path: "/home/home" },
{ title: "山西新闻" },
]);
const handleSizeChange = (val: number) => {
pageSize.value = val;
pageNo.value = pageNo.value;
......@@ -220,6 +228,8 @@ function getToDetail(id: number, contentDetails: string) {
router.push({
path: "/home/news/detail",
query: {
title: "山西新闻",
titlePath: "/home/sxnews",
type: 3,
id: id,
},
......
src/views/home/tynews/TaiyuanNews.vue
......@@ -2,6 +2,8 @@
<template>
<div class="min-h-screen bg-gray-50">
<div class="container mx-auto px-4 py-8 w-[1440px]">
<bread-crumb :breadcrumbItems="breadcrumbItems" />
<div class="flex gap-6">
<div class="flex-1">
<div class="bg-white rounded-lg shadow-sm">
......@@ -133,6 +135,7 @@ import {
ArrowRight,
} from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
const router = useRouter();
const route = useRoute();
......@@ -140,6 +143,11 @@ const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);
const breadcrumbItems = ref([
{ title: "首页", path: "/home/home" },
{ title: "太原新闻" },
]);
const handleSizeChange = (val: number) => {
pageSize.value = val;
pageNo.value = pageNo.value;
......@@ -220,6 +228,8 @@ function getToDetail(id: number) {
router.push({
path: "/home/news/detail",
query: {
title: "太原新闻",
titlePath: "/home/tynews",
type: 2,
id: id,
},
......
src/views/py/authority/Authority.vue
......@@ -2,7 +2,8 @@
<template>
<div>
<news-list
typePage="1"
title="权威发布"
pathType="/py/authority"
title1="辟谣专区"
title2="专家解读"
title3="法律法规"
......@@ -16,5 +17,7 @@
<script lang="ts" setup>
import { pyzq, qwfb, zjjd, flfg } from "@/utils/config";
import NewsList from "@/components/py/NewsList.vue";
import { useRoute } from "vue-router";
const route = useRoute();
</script>
<style scoped></style>
src/views/py/detail/NewsDetail.vue
<template>
<div class="min-h-screen bg-gray-50">
<div class="w-[1440px] mx-auto px-0 py-5">
<div class="flex items-center text-sm text-gray-500 mb-2">
<router-link
:to="toRoute()"
class="text-gray-500 hover:text-blue-500"
>{{ toRouteName() }}</router-link
>
<el-icon class="mx-2"><ArrowRight /></el-icon>
<span class="text-gray-900">新闻详情</span>
</div>
<!-- 主要内容区 -->
<bread-crumb
:breadcrumbItems="
route.query.pathType == '-1' ? breadcrumbItems2 : breadcrumbItems
"
/>
<div class="grid grid-cols-3 gap-8">
<!-- 左侧主要新闻内容 -->
<div class="col-span-2 bg-white rounded-lg shadow-sm p-6">
......@@ -111,6 +107,7 @@ import { getHit } from "@/api/home/news/list";
import { getNewsDetail } from "@/api/home/news/details";
import { baseImageUrl } from "@/utils/config";
import { getNewsList } from "@/api/home/news/list";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
const route = useRoute();
const router = useRouter();
......@@ -118,39 +115,50 @@ const details = ref({});
const list1 = ref([]);
const list2 = ref([]);
function toRouteName() {
switch (route.query.type) {
case "0":
return "首页";
case "1":
return "权威发布";
case "2":
return "辟谣专区";
case "3":
return "专家解读";
case "4":
return "法律法规";
case "5":
return "读图识谣";
}
}
function toRoute() {
switch (route.query.type) {
case "0":
return "/py/pyhome";
case "1":
return "/py/authority";
case "2":
return "/py/rumor";
case "3":
return "/py/expert";
case "4":
return "/py/law";
case "5":
return "/py/reading";
}
}
const breadcrumbItems = ref([
{ title: "首页", path: "/py/pyhome" },
{ title: route.query.title, path: route.query.pathType },
{ title: "详情", path: "" },
]);
const breadcrumbItems2 = ref([
{ title: "首页", path: "/py/pyhome" },
{ title: "详情", path: "" },
]);
// function toRouteName() {
// switch (route.query.type) {
// case "0":
// return "首页";
// case "1":
// return "权威发布";
// case "2":
// return "辟谣专区";
// case "3":
// return "专家解读";
// case "4":
// return "法律法规";
// case "5":
// return "读图识谣";
// }
// }
// function toRoute() {
// switch (route.query.type) {
// case "0":
// return "/py/pyhome";
// case "1":
// return "/py/authority";
// case "2":
// return "/py/rumor";
// case "3":
// return "/py/expert";
// case "4":
// return "/py/law";
// case "5":
// return "/py/reading";
// }
// }
getList1(3, 1);
getList2(5, 1);
......
src/views/py/expert/Expert.vue
......@@ -2,7 +2,8 @@
<template>
<div>
<news-list
typePage="3"
title="专家解读"
pathType="/py/expert"
title1="权威发布"
title2="辟谣专区"
title3="法律法规"
......@@ -10,7 +11,6 @@
:type1="qwfb"
:type2="pyzq"
:type3="flfg"
:homeMoreType="route.query.homeMoreType"
/>
</div>
</template>
......
src/views/py/law/Law.vue
......@@ -2,7 +2,8 @@
<template>
<div>
<news-list
typePage="4"
title="法律法规"
pathType="/py/law"
title1="辟谣专区"
title2="专家解读"
title3="权威发布"
......@@ -10,7 +11,6 @@
:type1="pyzq"
:type2="zjjd"
:type3="qwfb"
:homeMoreType="route.query.homeMoreType"
/>
</div>
</template>
......
src/views/py/reading/Reading.vue
......@@ -2,6 +2,8 @@
<template>
<div class="min-h-screen bg-gray-50">
<div class="container mx-auto px-4 py-8 w-[1440px]">
<bread-crumb :breadcrumbItems="breadcrumbItems" />
<div class="grid grid-cols-1 gap-8">
<!-- 分类卡片 -->
<div class="grid grid-cols-4 gap-6">
......@@ -9,6 +11,7 @@
v-for="(card, index) in newsList"
:key="index"
class="bg-white rounded-lg shadow-lg p-6 transition-transform hover:scale-105"
@click="getToDetail(card.id)"
>
<div class="h-48 w-full mb-4 overflow-hidden rounded-lg">
<img
......@@ -44,6 +47,8 @@ import { ref, computed } from "vue";
import { getNewsList } from "@/api/home/news/list";
import { baseImageUrl, dtsy } from "@/utils/config";
import { useRouter, useRoute } from "vue-router";
import { ArrowRight } from "@element-plus/icons-vue";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
const router = useRouter();
const route = useRoute();
......@@ -52,6 +57,11 @@ const pageSize = ref(10);
const total = ref(0);
const newsList = ref([]);
const breadcrumbItems = ref([
{ title: "首页", path: "/py/pyhome" },
{ title: "读图识谣" },
]);
const handleSizeChange = (val: number) => {
pageSize.value = val;
pageNo.value = pageNo.value;
......@@ -86,7 +96,12 @@ function getToDetail(id: number) {
router.push({
path: "/py/news/detail",
query: {
type: 5,
title: "读图识谣",
pathType: "/py/reading",
title1: "辟谣专区",
title2: "专家解读",
type1: "pyzq",
type2: "zjjd",
id: id,
},
});
......
src/views/py/rumor/Rumor.vue
......@@ -2,7 +2,8 @@
<template>
<div>
<news-list
typePage="2"
title="辟谣专区"
pathType="/py/rumor"
title1="权威发布"
title2="专家解读"
title3="法律法规"
......@@ -10,7 +11,6 @@
:type1="qwfb"
:type2="zjjd"
:type3="flfg"
:homeMoreType="route.query.homeMoreType"
/>
</div>
</template>
......
src/views/wm/home/WmHome.vue
......@@ -14,12 +14,6 @@
to="/wm/messagelist"
>更多留言 <el-icon class="ml-1"><ArrowRight /></el-icon
></router-link>
<!-- <div
class="text-sm text-blue-600 hover:text-blue-300 flex items-center"
@click="moreMessageClick"
>
更多留言 <el-icon class="ml-1"><ArrowRight /></el-icon>
</div> -->
</div>
<div class="space-y-3">
<div
......@@ -53,12 +47,6 @@
to="/wm/recoverlist"
>更多回复 <el-icon class="ml-1"><ArrowRight /></el-icon
></router-link>
<!-- <div
class="text-sm text-blue-600 hover:text-blue-300 flex items-center"
@click="moreRecoverClick"
>
更多回复 <el-icon class="ml-1"><ArrowRight /></el-icon>
</div> -->
</div>
<div class="space-y-3">
<div
......@@ -96,6 +84,8 @@ import {
Message,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { getHotList, getRecoverList } from "@/api/wm/wm";
const router = useRouter();
const hotTopics = ref([
{
......@@ -174,11 +164,42 @@ const replies = ref([
// });
// }
getList1(6, 1);
getList2(5, 1);
//热点留言
function getList1(pageSize: number, pageNo: number) {
const datas = {
contentType: "",
pageSize: pageSize,
pageNo: pageNo,
};
getHotList(datas).then((response) => {
const data = response.data;
const rowsList = data.rows;
// list1.value = rowsList;
});
}
//热点留言
function getList2(pageSize: number, pageNo: number) {
const datas = {
contentType: "",
pageSize: pageSize,
pageNo: pageNo,
};
getRecoverList(datas).then((response) => {
const data = response.data;
const rowsList = data.rows;
// list1.value = rowsList;
});
}
function messageClick(id: number) {
router.push({
path: "/wm/messagedetail",
query: {
type: 0,
pathType: "-1",
id: id,
},
});
......@@ -187,7 +208,7 @@ function recoverClick(id: number) {
router.push({
path: "/wm/recoverdetail",
query: {
type: 0,
pathType: "-1",
id: id,
},
});
......
src/views/wm/imessage/IMessage.vue
......@@ -3,15 +3,9 @@
<div class="bg-gray-50">
<!-- 主要内容区域 -->
<div class="container mx-auto px-0 py-0 w-[1440px]">
<div class="flex items-center text-sm text-gray-500 mb-5">
<router-link to="/wm/wmhome" class="text-gray-500 hover:text-blue-500"
>首页</router-link
>
<el-icon class="mx-2"><ArrowRight /></el-icon>
<span class="text-gray-900">我要留言</span>
</div>
<bread-crumb :breadcrumbItems="breadcrumbItems" />
<div class="grid grid-cols-12 gap-8">
<div class="grid grid-cols-12 gap-8 mt-5">
<!-- 左侧导航 -->
<div class="col-span-4">
<div class="bg-yellow-50 rounded-lg shadow-sm p-6">
......@@ -181,6 +175,12 @@
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { Warning, ArrowRight } from "@element-plus/icons-vue";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
const breadcrumbItems = ref([
{ title: "首页", path: "/wm/wmhome" },
{ title: "我要留言" },
]);
const letters = Array.from("ABCDEFGHJKLMNPQRSTUVWXYZ23456789");
const generateCaptcha = () => {
......
src/views/wm/message/MessageDetail.vue
......@@ -3,21 +3,11 @@
<template>
<div class="bg-gray-50">
<div class="mx-auto w-[1440px] px-4 py-0">
<!-- 面包屑导航 -->
<div class="mb-6 flex items-center text-sm text-gray-500">
<router-link to="/wm/wmhome" class="hover:text-gray-600 text-gray-500"
>首页</router-link
>
<el-icon v-if="type == 1" class="mx-2"><ArrowRight /></el-icon>
<router-link
v-if="type == 1"
to="/wm/messagelist"
class="hover:text-gray-600 text-gray-500"
>留言列表</router-link
>
<el-icon class="mx-2"><ArrowRight /></el-icon>
<span class="text-gray-900">留言详情</span>
</div>
<bread-crumb
:breadcrumbItems="
route.query.pathType == '-1' ? breadcrumbItems2 : breadcrumbItems
"
/>
<!-- 主要内容卡片 -->
<div class="rounded-lg bg-white p-6 shadow-sm">
......@@ -83,8 +73,21 @@
<script lang="ts" setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
const router = useRoute();
const type = router.query.type;
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
import { ref } from "vue";
const route = useRoute();
const breadcrumbItems = ref([
{ title: "首页", path: "/wm/wmhome" },
{ title: route.query.title, path: route.query.pathType },
{ title: "详情", path: "" },
]);
const breadcrumbItems2 = ref([
{ title: "首页", path: "/wm/wmhome" },
{ title: "详情", path: "" },
]);
</script>
<style scoped>
......
src/views/wm/message/MessageList.vue
......@@ -4,13 +4,7 @@
<div class="w-[1440px] mx-auto px-4">
<!-- 面包屑导航 -->
<div class="flex items-center justify-between py-2 border-b mb-5">
<div class="flex items-center text-sm text-gray-500">
<router-link to="/wm/wmhome" class="text-gray-500 hover:text-blue-500"
>首页</router-link
>
<el-icon class="mx-2"><ArrowRight /></el-icon>
<span class="text-gray-900">留言列表</span>
</div>
<bread-crumb :breadcrumbItems="breadcrumbItems" />
<!-- 搜索框 -->
<div class="relative">
......@@ -62,10 +56,17 @@
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Search, ArrowRight } from "@element-plus/icons-vue";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
const router = useRouter();
const searchText = ref("");
const currentPage = ref(1);
const breadcrumbItems = ref([
{ title: "首页", path: "/wm/wmhome" },
{ title: "留言列表" },
]);
const messageList = ref([
{
title: "反映某建筑公司拖欠农民工工资问题",
......@@ -100,7 +101,8 @@ function clickList(id: number) {
router.push({
path: "/wm/messagedetail",
query: {
type: 1,
title: "留言列表",
pathType: "/wm/messagelist",
id: id,
},
});
......
src/views/wm/recover/RecoverDetail.vue
......@@ -4,20 +4,11 @@
<div class="bg-gray-50">
<div class="mx-auto w-[1440px] px-4 py-0">
<!-- 面包屑导航 -->
<div class="mb-6 flex items-center text-sm text-gray-500">
<router-link to="/wm/wmhome" class="hover:text-gray-600 text-gray-500"
>首页</router-link
>
<el-icon v-if="type == 1" class="mx-2"><ArrowRight /></el-icon>
<router-link
v-if="type == 1"
to="/wm/recoverlist"
class="hover:text-gray-600 text-gray-500"
>回复列表</router-link
>
<el-icon class="mx-2"><ArrowRight /></el-icon>
<span class="text-gray-900">回复详情</span>
</div>
<bread-crumb
:breadcrumbItems="
route.query.pathType == '-1' ? breadcrumbItems2 : breadcrumbItems
"
/>
<!-- 主要内容卡片 -->
<div class="rounded-lg bg-white p-6 shadow-sm">
......@@ -83,8 +74,21 @@
<script lang="ts" setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
const router = useRoute();
const type = router.query.type;
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
import { ref } from "vue";
const route = useRoute();
const type = route.query.type;
const breadcrumbItems = ref([
{ title: "首页", path: "/wm/wmhome" },
{ title: route.query.title, path: route.query.pathType },
{ title: "详情", path: "" },
]);
const breadcrumbItems2 = ref([
{ title: "首页", path: "/wm/wmhome" },
{ title: "详情", path: "" },
]);
</script>
<style scoped>
......
src/views/wm/recover/RecoverList.vue
......@@ -5,13 +5,7 @@
<div class="mx-auto w-[1440px] px-4">
<!-- 面包屑导航 -->
<div class="flex items-center justify-between py-2 border-b mb-5">
<div class="flex items-center text-sm text-gray-500">
<router-link to="/wm/wmhome" class="text-gray-500 hover:text-blue-500"
>首页</router-link
>
<el-icon class="mx-2"><ArrowRight /></el-icon>
<span class="text-gray-900">回复列表</span>
</div>
<bread-crumb :breadcrumbItems="breadcrumbItems" />
<!-- 搜索框 -->
<div class="relative">
......@@ -71,12 +65,16 @@
import { ref, computed } from "vue";
import { Search, ArrowRight } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
const router = useRouter();
const searchText = ref("");
const currentPage = ref(1);
const pageSize = ref(5);
const breadcrumbItems = ref([
{ title: "首页", path: "/wm/wmhome" },
{ title: "回复列表" },
]);
const allItems = [
{
title: "关于东湖公园设施改善的回复",
......@@ -130,7 +128,8 @@ function clickList(id: number) {
router.push({
path: "/wm/recoverdetail",
query: {
type: 1,
title: "回复列表",
pathType: "/wm/recoverlist",
id: id,
},
});
......
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