部分代码提交

src/api/wm/wm.js

+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

+<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

+<!-- 代码已包含 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/home/PyHome.vue

@@ -4,10 +4,10 @@
     <main class="container mx-auto px-8 py-8">
       <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
         <h2 class="text-2xl font-bold mb-4 text-black">
-          全国网络辟谣联动机制第三次全体会议召开
+          {{ title }}
         </h2>
         <p class="text-gray-600 mb-4">
-          网络谣言是当前网上政治安全和国家安全的重要考验，是开展网上舆论工作的重要课题，是深化网络综合治理的重要内容。
+          {{ description }}
         </p>
         <div class="flex gap-8 mb-8">
           <div class="relative w-2/3 rounded-lg overflow-hidden">
@@ -16,13 +16,16 @@
               :pagination="{ clickable: true }"
               :navigation="true"
               :autoplay="{ delay: 3000, disableOnInteraction: false }"
-              class="w-full h-full"
+              class="swiper-container w-full h-full"
+              @swiper="onSwiper"
+              @slideChange="onSlideChange"
             >
-              <swiper-slide v-for="(slide, index) in slides" :key="index">
+              <swiper-slide v-for="(slide, index) in list3" :key="index">
                 <el-image
-                  :src="slide.src"
+                  :src="slide.images"
                   fit="cover"
                   class="w-full h-full object-cover"
+                  @click="getToDetail(slide.id)"
                 />
                 <!-- 使用 el-image 组件显示图片，并设置图片填充方式为覆盖 -->
               </swiper-slide>
@@ -36,16 +39,25 @@
               class="hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer"
               shadow="hover"
             >
+              <a
+                :href="item.url"
+                target="_blank"
+                class="flex items-center gap-4 p-1 bg-gradient-to-r from-blue-50 to-white rounded-lg"
+              >
                 <div
-                class="flex items-center gap-4 p-2 bg-gradient-to-r from-blue-50 to-white rounded-lg"
+                  class="flex items-center gap-0 p-0 bg-gradient-to-r from-blue-50 to-white rounded-lg"
                 >
                   <el-icon :size="24" class="text-blue-600">
                     <component :is="item.icon" />
                   </el-icon>
-                <h4 class="font-bold text-base text-blue-900 flex items-center">
+                  <h4
+                    :style="{ whiteSpace: 'pre-line' }"
+                    class="font-bold text-base text-blue-900 flex items-center ml-5"
+                  >
                     {{ item.title }}
                   </h4>
                 </div>
+              </a>
             </el-card>
           </div>
         </div>
@@ -76,6 +88,7 @@
                   <el-link
                     :underline="false"
                     class="text-gray-700 hover:text-primary truncate"
+                    @click="getToDetail(item.id)"
                     >{{ item.contentTitle }}</el-link
                   >
                 </li>
@@ -87,7 +100,9 @@
       <div class="bg-white rounded-lg shadow-lg p-6 mt-8">
         <div class="flex justify-between items-center mb-6">
           <h3 class="text-xl font-bold text-primary">读图识谣</h3>
-          <el-button type="primary" text>更多 ></el-button>
+          <el-button type="primary" text @click="goToTyMoreList(3)"
+            >更多 ></el-button
+          >
         </div>
         <div class="relative">
           <swiper
@@ -98,15 +113,22 @@
             :autoplay="{ delay: 3000 }"
             class="service-swiper"
           >
-            <swiper-slide v-for="(card, index) in serviceCards" :key="index">
-              <el-card class="h-full hover:shadow-lg transition-shadow">
-                <el-image
-                  :src="card.image"
+            <swiper-slide v-for="(item, index) in list2" :key="index">
+              <el-card
+                class="h-full hover:shadow-lg transition-shadow"
+                @click="getToDetail(item.id)"
+              >
+                <img :src="item.images" class="w-full h-full object-cover" />
+
+                <!-- <el-image
+                  :src="item.images"
                   fit="cover"
                   class="w-full h-40 rounded mb-4"
-                />
-                <h4 class="font-bold mb-2">{{ card.title }}</h4>
-                <p class="text-sm text-gray-600">{{ card.description }}</p>
+                /> -->
+                <h4 class="font-bold mb-2">{{ item.contentTitle }}</h4>
+                <p class="text-sm text-gray-600">
+                  {{ item.contentDescription }}
+                </p>
               </el-card>
             </swiper-slide>
           </swiper>
@@ -133,21 +155,42 @@ import "swiper/css/pagination";
 import "swiper/css/autoplay";
 import "swiper/css/navigation";
 import { getNewsList } from "@/api/home/news/list";
-import { baseImageUrl, dtsy, zjjd, pyzq, flfg } from "@/utils/config";
+import { baseImageUrl, lhpylbt, dtsy, zjjd, pyzq, flfg } from "@/utils/config";
 import { useRouter, useRoute } from "vue-router";
 
+const title = ref();
+const description = ref();
+const list1 = ref([
+  {
+    title: "专家解读",
+    items: [],
+  },
+  {
+    title: "辟谣专区",
+    items: [],
+  },
+  {
+    title: "法律法规",
+    items: [],
+  },
+]);
+const list2 = ref([]);
+const list3 = ref([]);
 const router = useRouter();
 const route = useRoute();
-const activeIndex = ref("0");
 const swiperModules = [Pagination, Navigation, Autoplay];
-const menuItems = [
-  "首页",
-  "权威发布",
-  "辟谣专区",
-  "专家解读",
-  "法律法规",
-  "读图识谣",
-];
+
+const onSwiper = (swiper) => {
+  const index = swiper.activeIndex;
+  title.value = list3.value[index]?.contentTitle;
+  description.value = list3.value[index]?.contentDescription;
+};
+const onSlideChange = (swiper) => {
+  console.log(swiper.activeIndex);
+  const index = swiper.activeIndex;
+  title.value = list3.value[index]?.contentTitle;
+  description.value = list3.value[index]?.contentDescription;
+};
 
 //专家解读、辟谣专区、法律法规 更多
 function goToTyMoreList(index: number) {
@@ -155,80 +198,71 @@ function goToTyMoreList(index: number) {
     case 0: //专家解读
       router.push({
         path: "/py/expert",
-        query: {
-          homeMoreType: "-1",
-        },
       });
       break;
     case 1: //辟谣专区
       router.push({
         path: "/py/rumor",
-        query: {
-          homeMoreType: "-1",
-        },
       });
       break;
     case 2: //法律法规
       router.push({
         path: "/py/law",
-        query: {
-          homeMoreType: "-1",
-        },
+      });
+      break;
+    case 3: //读图识谣
+      router.push({
+        path: "/py/reading",
       });
       break;
   }
 }
 
-// function getToDetail(section: any) {
-//   router.push({
-//     path: "/py/news/detail",
-//     query: {
-//       type: 5,
-//       id: id,
-//     },
-//   });
-// }
-const slides = [
+const quickLinks = [
   {
-    src: "https://ai-public.mastergo.com/ai/img_res/a6c6b005094da8f76e79def3225b4ea0.jpg",
+    icon: Document,
+    title: "网络谣言曝光台",
+    url: "https://www.piyao.org.cn/yybgt/index.htm",
   },
   {
-    src: "https://ai-public.mastergo.com/ai/img_res/cc20fdfc4e9bcd53c4f517b03036c8a2.jpg",
+    icon: UserFilled,
+    title: "中央网信办举报中心官网违法和不良信息举报入口",
+    url: "https://www.12377.cn",
   },
   {
-    src: "https://ai-public.mastergo.com/ai/img_res/40e648e87a974e8fe013b6f4b9b0ac2b.jpg",
+    icon: Lock,
+    title: "辟谣求证入口",
+    url: "https://www.piyao.org.cn/2020yqpy",
   },
-];
-const quickLinks = [
-  { icon: Document, title: "最新辟谣" },
-  { icon: UserFilled, title: "举报入口" },
-  { icon: Lock, title: "安全提醒" },
-  { icon: List, title: "政策法规" },
-  { icon: Service, title: "在线咨询" },
-  { icon: Bell, title: "举报中心" },
-  { icon: Collection, title: "知识库" },
-];
-
-const list1 = ref([
   {
-    title: "专家解读",
-    items: [],
+    icon: List,
+    title: "山西省互联网违法和不良信息举报中心举报入口",
+    url: "https://www.sxgov.cn/node_280205.htm",
   },
   {
-    title: "辟谣专区",
-    items: [],
+    icon: Service,
+    title: "涉企侵权举报专区",
+    url: "https://www.sxgov.cn/node_319806.htm",
   },
   {
-    title: "法律法规",
-    items: [],
+    icon: Bell,
+    title: "涉历史虚无主义有害信息举报专区",
+    url: "https://topic.sxgov.cn/node_319310.htm",
   },
-]);
+  {
+    icon: Collection,
+    title: "网络谣言和虚假信息举报专区",
+    url: "https://topic.sxgov.cn/node_319499.htm",
+  },
+];
 
 getList(zjjd, 10, 1);
 getList(pyzq, 10, 1);
 getList(flfg, 10, 1);
+getList2(dtsy, 10, 1);
+getList3(5, 1); //轮播图
 
-//获取专家解读
+//获取专家解读、辟谣专区、法律法规
 function getList(value: string, pageSize: number, pageNo: number) {
   const datas = {
     contentType: value,
@@ -250,44 +284,57 @@ function getList(value: string, pageSize: number, pageNo: number) {
   });
 }
 
-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: "环保谣言不再迷惑",
+//获取读图识谣
+function getList2(value: string, pageSize: number, pageNo: number) {
+  const datas = {
+    contentType: value,
+    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);
+      }
+    });
+    list2.value = rowsList;
+  });
+}
+
+//获取首页轮播图
+function getList3(pageSize: number, pageNo: number) {
+  const datas = {
+    contentType: lhpylbt,
+    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);
+      }
+    });
+    list3.value = rowsList;
+  });
+}
+
+function getToDetail(id: number) {
+  router.push({
+    path: "/py/news/detail",
+    query: {
+      pathType: "-1",
+      type1: zjjd,
+      type2: pyzq,
+      title1: "辟谣专区",
+      title2: "专家解读",
+      id: id,
     },
-];
+  });
+}
 </script>
 <style scoped>
 .hero-bg {

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,
     },
   });