Skip to content

E
emergency-project
Commit 386dafb6 by 吴春元
Options

修改

parent 46abc84b
Showing with 1292 additions and 444 deletions
src/components/footer.vue 0 → 100644
<template>
<div class="bg-gray-50">
<!-- 页脚 -->
<footer class="bg-gray-800 text-gray-300">
<div class="container mx-auto px-4 py-10 w-[1440px]">
<div class="grid grid-cols-3 gap-8">
<div>
<h3 class="text-lg font-medium mb-4">联系我们</h3>
<div class="space-y-2">
<p>地址：山西省太原市迎泽区迎泽大街 369 号</p>
<p>电话：0351-12345678</p>
<p>邮箱：te@tynet.gov.cn</p>
</div>
</div>
<div>
<h4 class="text-lg font-medium mb-4">主办单位</h4>
<p>太原市互联网应急指挥和举报中心</p>
</div>
<div></div>
<!-- <div>
<h3 class="text-lg font-medium mb-4">关注我们</h3>
<div class="flex space-x-4">
<el-icon class="text-2xl"><Message /></el-icon>
<el-icon class="text-2xl"><Share /></el-icon>
<el-icon class="text-2xl"><Link /></el-icon>
</div>
</div> -->
</div>
<div class="mt-8 pt-5 border-t border-gray-700 text-center">
<p>Copyright © 2024 太原市互联网应急指挥和举报中心 版权所有</p>
<p class="mt-2">晋ICP备12345678号-1 | 晋公网安备 14010002000001号</p>
</div>
</div>
</footer>
</div>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Message, Share, Link, Search } from "@element-plus/icons-vue";
</script>
<style scoped></style>
src/components/news/PyNewsList.vue
...@@ -11,7 +11,10 @@ ...@@ -11,7 +11,10 @@
class="group p-4 flex items-start border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer" class="group p-4 flex items-start border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer"
@click="getToDetail(news.id)" @click="getToDetail(news.id)"
> >
<div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg"> <div
v-if="news.images != null"
class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg"
>
<el-image <el-image
class="w-full h-full object-cover" class="w-full h-full object-cover"
:src="news.images" :src="news.images"
......
src/components/py/NewsList.vue
...@@ -2,8 +2,24 @@ ...@@ -2,8 +2,24 @@
<template> <template>
<div class="min-h-screen bg-gray-50"> <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-4 py-8 w-[1440px]">
<bread-crumb :breadcrumbItems="breadcrumbItems" /> <!-- <bread-crumb :breadcrumbItems="breadcrumbItems" /> -->
<div class="mb-6">
<el-breadcrumb :separator-icon="ArrowRight">
<el-breadcrumb-item
:to="{
path: '/py/pyhome',
// query: {
// categoryTitle: '首页',
// categoryId: '999',
// },
}"
>首页</el-breadcrumb-item
>
<el-breadcrumb-item>{{
route.query.categoryTitle
}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="flex gap-6"> <div class="flex gap-6">
<div class="flex-1"> <div class="flex-1">
<div class="bg-white rounded-lg shadow-sm"> <div class="bg-white rounded-lg shadow-sm">
...@@ -15,11 +31,11 @@ ...@@ -15,11 +31,11 @@
> >
<div <div
v-if="item.images != null" v-if="item.images != null"
class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg" class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg mr-3"
> >
<img :src="item.images" class="w-full h-full object-cover" /> <img :src="item.images" class="w-full h-full object-cover" />
</div> </div>
<div class="flex-grow px-6"> <div class="flex-grow">
<h2 <h2
class="text-lg font-semibold mb-2 group-hover:text-blue-600 line-clamp-2 text-black" class="text-lg font-semibold mb-2 group-hover:text-blue-600 line-clamp-2 text-black"
> >
...@@ -68,12 +84,53 @@ ...@@ -68,12 +84,53 @@
</div> </div>
</div> </div>
<div class="w-80 flex-shrink-0 space-y-6"> <div class="w-80 flex-shrink-0 space-y-3">
<!-- 权威发布 -->
<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 list0"
:key="index"
class="group cursor-pointer"
@click="getToDetail(item)"
>
<div
v-if="item.images"
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-1 text-black"
>
{{ item.contentTitle }}
</div>
<p class="text-gray-600 text-sm line-clamp-2 mt-1">
{{ item.contentDescription }}
</p>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div>
</div>
</div>
<!-- 辟谣专区 --> <!-- 辟谣专区 -->
<div class="bg-white rounded-lg shadow-sm p-4"> <div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black"> <h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-red-500"><Star /></el-icon> <el-icon class="mr-2 text-red-500"><Star /></el-icon>
{{ title1 }} 辟谣专区
</h2> </h2>
<div class="space-y-4"> <div class="space-y-4">
<div <div
...@@ -83,12 +140,29 @@ ...@@ -83,12 +140,29 @@
@click="getToDetail(item)" @click="getToDetail(item)"
> >
<div <div
class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black" v-if="item.images"
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-1 text-black"
> >
{{ item.contentTitle }} {{ item.contentTitle }}
</div> </div>
<div class="text-xs text-gray-500 mt-1"> <p class="text-gray-600 text-sm line-clamp-2 mt-1">
{{ item.contentHit }} 阅读 {{ item.contentDescription }}
</p>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -97,7 +171,7 @@ ...@@ -97,7 +171,7 @@
<div class="bg-white rounded-lg shadow-sm p-4"> <div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black"> <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-blue-500"><Location /></el-icon>
{{ title2 }} 专家解读
</h2> </h2>
<div class="space-y-4"> <div class="space-y-4">
<div <div
...@@ -107,16 +181,30 @@ ...@@ -107,16 +181,30 @@
@click="getToDetail(item)" @click="getToDetail(item)"
> >
<div <div
v-if="item.images != null" v-if="item.images"
class="h-32 mb-2 overflow-hidden rounded-lg" class="h-32 mb-2 overflow-hidden rounded-lg"
> >
<img :src="item.images" class="w-full h-full object-cover" /> <img :src="item.images" class="w-full h-full object-cover" />
</div> </div>
<div <div
class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black" class="text-sm font-medium group-hover:text-blue-600 line-clamp-1 text-black"
> >
{{ item.contentTitle }} {{ item.contentTitle }}
</div> </div>
<p class="text-gray-600 text-sm line-clamp-2 mt-1">
{{ item.contentDescription }}
</p>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -125,7 +213,7 @@ ...@@ -125,7 +213,7 @@
<div class="bg-white rounded-lg shadow-sm p-4"> <div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black"> <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-blue-500"><Location /></el-icon>
{{ title3 }} 法律法规
</h2> </h2>
<div class="space-y-4"> <div class="space-y-4">
<div <div
...@@ -134,14 +222,31 @@ ...@@ -134,14 +222,31 @@
class="group cursor-pointer" class="group cursor-pointer"
@click="getToDetail(item)" @click="getToDetail(item)"
> >
<div class="h-32 mb-2 overflow-hidden rounded-lg"> <div
v-if="item.images"
class="h-32 mb-2 overflow-hidden rounded-lg"
>
<img :src="item.images" class="w-full h-full object-cover" /> <img :src="item.images" class="w-full h-full object-cover" />
</div> </div>
<div <div
class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black" class="text-sm font-medium group-hover:text-blue-600 line-clamp-1 text-black"
> >
{{ item.contentTitle }} {{ item.contentTitle }}
</div> </div>
<p class="text-gray-600 text-sm line-clamp-2 mt-1">
{{ item.contentDescription }}
</p>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -151,7 +256,7 @@ ...@@ -151,7 +256,7 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { ref, watch } from "vue";
import { import {
Clock, Clock,
Document, Document,
...@@ -185,10 +290,10 @@ const props = defineProps({ ...@@ -185,10 +290,10 @@ const props = defineProps({
title3: String, title3: String,
}); });
const breadcrumbItems = ref([ // const breadcrumbItems = ref([
{ title: "首页", path: "/py/pyhome" }, // { title: "首页", path: "/py/pyhome" },
{ title: props.title }, // { title: props.title },
]); // ]);
const handleSizeChange = (val: number) => { const handleSizeChange = (val: number) => {
pageSize.value = val; pageSize.value = val;
...@@ -199,20 +304,30 @@ const handleCurrentChange = (val: number) => { ...@@ -199,20 +304,30 @@ const handleCurrentChange = (val: number) => {
pageNo.value = val; pageNo.value = val;
getList(pageSize.value, pageNo.value); getList(pageSize.value, pageNo.value);
}; };
const list0 = ref([]);
const list = ref([]); const list = ref([]);
const list1 = ref([]); const list1 = ref([]);
const list2 = ref([]); const list2 = ref([]);
const list3 = ref([]); const list3 = ref([]);
getList(10, 1); getList(pageSize.value, pageNo.value);
getList0();
getList1(); getList1();
getList2(); getList2();
getList3(); getList3();
watch(
() => route.query.categoryId,
(newVal, oldVal) => {
getList(pageSize.value, pageNo.value);
}
);
//获取主列表 //获取主列表
function getList(pageSize: number, pageNo: number) { function getList(pageSize: number, pageNo: number) {
const datas = { const datas = {
contentDisplay: "0", contentDisplay: "0",
contentType: props.type0, categoryId: route.query.categoryId,
pageSize: pageSize, pageSize: pageSize,
pageNo: pageNo, pageNo: pageNo,
}; };
...@@ -228,12 +343,32 @@ function getList(pageSize: number, pageNo: number) { ...@@ -228,12 +343,32 @@ function getList(pageSize: number, pageNo: number) {
}); });
} }
//获取测边列表 0
function getList0() {
const datas = {
contentDisplay: "0",
contentType: qwfb,
pageSize: 3,
pageNo: 1,
};
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);
}
});
list0.value = rowsList;
});
}
//获取测边列表 1 //获取测边列表 1
function getList1() { function getList1() {
const datas = { const datas = {
contentDisplay: "0", contentDisplay: "0",
contentType: props.type1, contentType: props.type1,
pageSize: 5, pageSize: 3,
pageNo: 1, pageNo: 1,
}; };
getNewsList(datas).then((response) => { getNewsList(datas).then((response) => {
...@@ -253,7 +388,7 @@ function getList2() { ...@@ -253,7 +388,7 @@ function getList2() {
const datas = { const datas = {
contentDisplay: "0", contentDisplay: "0",
contentType: props.type2, contentType: props.type2,
pageSize: 2, pageSize: 3,
pageNo: 1, pageNo: 1,
}; };
getNewsList(datas).then((response) => { getNewsList(datas).then((response) => {
...@@ -295,6 +430,9 @@ function getToDetail(item: any) { ...@@ -295,6 +430,9 @@ function getToDetail(item: any) {
router.push({ router.push({
path: "/py/news/detail", path: "/py/news/detail",
query: { query: {
categoryTitle: route.query.categoryTitle,
// titlePath: "/home/news",
categoryId: route.query.categoryId,
title: props.title, title: props.title,
pathType: props.pathType, pathType: props.pathType,
type1: props.type1, type1: props.type1,
......
src/layout/news.vue
...@@ -47,9 +47,9 @@ ...@@ -47,9 +47,9 @@
</nav> </nav>
<router-view></router-view> <router-view></router-view>
<Footer></Footer>
<!-- 页脚 --> <!-- 页脚 -->
<footer class="bg-gray-800 text-gray-300 mt-10"> <!-- <footer class="bg-gray-800 text-gray-300 mt-10">
<div class="container mx-auto px-4 py-10 w-[1440px]"> <div class="container mx-auto px-4 py-10 w-[1440px]">
<div class="grid grid-cols-2 gap-8"> <div class="grid grid-cols-2 gap-8">
<div> <div>
...@@ -57,37 +57,86 @@ ...@@ -57,37 +57,86 @@
<div class="space-y-2"> <div class="space-y-2">
<p>地址：山西省太原市迎泽区迎泽大街 369 号</p> <p>地址：山西省太原市迎泽区迎泽大街 369 号</p>
<p>电话：0351-12345678</p> <p>电话：0351-12345678</p>
<p>邮箱：contact@tynet.gov.cn</p> <p>邮箱：te@tynet.gov.cn</p>
</div> </div>
</div> </div>
<div> <!-- <div>
<h3 class="text-lg font-medium mb-4">关注我们</h3> <h3 class="text-lg font-medium mb-4">关注我们</h3>
<div class="flex space-x-4"> <div class="flex space-x-4">
<el-icon class="text-2xl"><Message /></el-icon> <el-icon class="text-2xl"><Message /></el-icon>
<el-icon class="text-2xl"><Share /></el-icon> <el-icon class="text-2xl"><Share /></el-icon>
<el-icon class="text-2xl"><Link /></el-icon> <el-icon class="text-2xl"><Link /></el-icon>
</div> </div>
</div> </div> -->
</div> <!-- </div>
<div class="mt-8 pt-8 border-t border-gray-700 text-center"> <div class="mt-8 pt-8 border-t border-gray-700 text-center">
<p>Copyright © 2024 太原市互联网应急指挥和举报中心 版权所有</p> <p>Copyright © 2024 太原市互联网应急指挥和举报中心 版权所有</p>
<p class="mt-2">晋ICP备12345678号-1 | 晋公网安备 14010002000001号</p> <p class="mt-2">晋ICP备12345678号-1 | 晋公网安备 14010002000001号</p>
</div> </div>
</div> </div>
</footer> </footer> -->
</div> </div>
</template> </template>
<script setup> <script setup lang="ts">
import { ref } from "vue"; import { ref, watch } from "vue";
import { useRouter } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import { Message, Share, Link, Search } from "@element-plus/icons-vue"; import { Message, Share, Link, Search } from "@element-plus/icons-vue";
import { getTab } from "@/api/home/home"; import { getTab } from "@/api/home/home";
import { HLW_YJZH_JBZX } from "@/utils/config"; import { HLW_YJZH_JBZX } from "@/utils/config";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import Footer from "@/components/footer.vue";
const router = useRouter(); const router = useRouter();
const route = useRoute();
const searchQuery = ref(""); const searchQuery = ref("");
const activeNav = ref(0); const activeNav = ref(0);
const navItems = ref([]); const navItems = ref();
//activeNav 监听
watch(
() => route.query.categoryId,
(newVal, oldVal) => {
if (route.query.activeNav != null) {
if (route.query.activeNav == "0") {
activeNav.value = 2;
}
if (route.query.activeNav == "1") {
activeNav.value = 1;
}
}
setNactiveNav();
}
);
function setNactiveNav(navItem?: any) {
navItem = navItem || navItems.value;
navItem.forEach((item: any, index: number) => {
if (item.id == route.query.categoryId) {
activeNav.value = index;
}
});
}
function navigateTo(index: number, item: any) {
// const routes = [
// { path: "/home/home", query: { id: item.id } },
// { path: "/home/news", query: { id: item.id } },
// { path: "/home/tynews", query: { id: item.id } },
// { path: "/home/sxnews", query: { id: item.id } },
// { path: "/home/announcements", query: { id: item.id } },
// ];
if (index == 0) {
router.push({
path: "/home/home",
query: { categoryId: item.id, categoryTitle: item.categoryTitle },
});
} else {
router.push({
path: "/home/news",
query: { categoryId: item.id, categoryTitle: item.categoryTitle },
});
}
activeNav.value = index;
}
const data = { const data = {
categoryFlag: HLW_YJZH_JBZX, categoryFlag: HLW_YJZH_JBZX,
...@@ -95,26 +144,17 @@ const data = { ...@@ -95,26 +144,17 @@ const data = {
getTab(data).then((res) => { getTab(data).then((res) => {
console.log(res); console.log(res);
const data = res.data.rows; const data: any[] = res.data.rows;
// //用data内的categorySort排序 // //用data内的categorySort排序
data.sort((a, b) => a.categorySort - b.categorySort); data.sort((a, b) => a.categorySort - b.categorySort);
//将data内categoryTitle等于“权威发布”和“辟谣专区”和“轮播图”的数据过滤不在navItems.value中显示 //将data内categoryTitle等于“轮播图”的数据过滤不在navItems.value中显示
data.unshift({ categoryTitle: "首页", categoryId: "999" });
const filterData = data.filter((item) => item.categoryTitle !== "轮播图"); const filterData = data.filter((item) => item.categoryTitle !== "轮播图");
navItems.value = filterData; navItems.value = filterData;
setNactiveNav(navItems.value);
}); });
function navigateTo(index, item) {
const routes = [
{ path: "/home/home", query: { id: item.id } },
{ path: "/home/news", query: { id: item.id } },
{ path: "/home/tynews", query: { id: item.id } },
{ path: "/home/sxnews", query: { id: item.id } },
{ path: "/home/announcements", query: { id: item.id } },
];
router.push({ path: routes[index].path });
activeNav.value = index;
}
function handleSearch() { function handleSearch() {
if (searchQuery.value) { if (searchQuery.value) {
router.push({ router.push({
......
src/layout/py.vue
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
:key="index" :key="index"
class="py-4 px-6 cursor-pointer hover:bg-white/10 transition-colors" class="py-4 px-6 cursor-pointer hover:bg-white/10 transition-colors"
:class="{ 'bg-white/10': activeIndex === index }" :class="{ 'bg-white/10': activeIndex === index }"
@click="navigateTo(index)" @click="navigateTo(index, item)"
> >
<span class="text-white">{{ item.categoryTitle }}</span> <span class="text-white">{{ item.categoryTitle }}</span>
</div> </div>
...@@ -33,7 +33,9 @@ ...@@ -33,7 +33,9 @@
</nav> </nav>
</header> </header>
<router-view /> <router-view />
<footer class="bg-gray-100 py-8"> <Footer></Footer>
<!-- <footer class="bg-gray-100 py-8">
<div class="container mx-auto px-8"> <div class="container mx-auto px-8">
<div class="text-center text-sm text-gray-600"> <div class="text-center text-sm text-gray-600">
<p class="mb-2">联系电话：0351-5236042 技术支持：0351-5236044</p> <p class="mb-2">联系电话：0351-5236042 技术支持：0351-5236044</p>
...@@ -44,14 +46,15 @@ ...@@ -44,14 +46,15 @@
<p>版权所有 © 2024 山西互联网联合辟谣平台 保留所有权利</p> <p>版权所有 © 2024 山西互联网联合辟谣平台 保留所有权利</p>
</div> </div>
</div> </div>
</footer> </footer> -->
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { computed, ref, watch } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue"; import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Navigation, Autoplay } from "swiper/modules"; import { Pagination, Navigation, Autoplay } from "swiper/modules";
import { useRouter } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import Footer from "@/components/footer.vue";
import { import {
Document, Document,
...@@ -64,12 +67,31 @@ import { ...@@ -64,12 +67,31 @@ import {
} from "@element-plus/icons-vue"; } from "@element-plus/icons-vue";
import { HLW_LH_PYPT } from "@/utils/config"; import { HLW_LH_PYPT } from "@/utils/config";
import { getTab } from "@/api/home/home"; import { getTab } from "@/api/home/home";
import { log } from "console";
const activeIndex = ref("0"); const activeIndex = ref(0);
const router = useRouter(); const router = useRouter();
const route = useRoute();
const navItems = ref([]); const navItems = ref([]);
//activeNav 监听
watch(
() => route.query.categoryId,
(newVal, oldVal) => {
setNactiveNav();
}
);
function setNactiveNav(navItem?: any) {
navItem = navItem || navItems.value;
navItem.forEach((item: any, index: number) => {
console.log(item.categoryId);
if (item.id == route.query.categoryId) {
activeIndex.value = index;
}
});
}
function goToHome() { function goToHome() {
if (window.opener && !window.opener.closed) { if (window.opener && !window.opener.closed) {
window.opener.focus(); // 将焦点返回到原始窗口 window.opener.focus(); // 将焦点返回到原始窗口
...@@ -86,25 +108,52 @@ getTab(data).then((res) => { ...@@ -86,25 +108,52 @@ getTab(data).then((res) => {
const data = res.data.rows; const data = res.data.rows;
// //用data内的categorySort排序 // //用data内的categorySort排序
data.sort((a, b) => a.categorySort - b.categorySort); data.sort((a, b) => a.categorySort - b.categorySort);
data.unshift({ categoryTitle: "首页", categoryId: "999" });
//将data内categoryTitle等于“权威发布”和“辟谣专区”和“轮播图”的数据过滤不在navItems.value中显示 //将data内categoryTitle等于“权威发布”和“辟谣专区”和“轮播图”的数据过滤不在navItems.value中显示
const filterData = data.filter( const filterData = data
(item) => .filter(
item.categoryTitle !== "轮播图" && (item) =>
item.categoryTitle !== "山西互联网联合辟谣平台" item.categoryTitle !== "轮播图" &&
); item.categoryTitle !== "山西互联网联合辟谣平台"
)
.map((item) => {
item.categoryId = item.categoryId.toString();
return item;
});
navItems.value = filterData; navItems.value = filterData;
setNactiveNav(navItems.value);
if (route.query.activeNav != null) {
if (route.query.activeNav == "2") {
activeIndex.value = 1;
}
if (route.query.activeNav == "3") {
activeIndex.value = 2;
}
}
}); });
function navigateTo(index) { function navigateTo(index: number, item: any) {
const routes = [ // const routes = [
{ path: "/py/pyhome" }, // { path: "/py/pyhome" },
{ path: "/py/authority" }, // { path: "/py/authority" },
{ path: "/py/rumor" }, // { path: "/py/rumor" },
{ path: "/py/expert" }, // { path: "/py/expert" },
{ path: "/py/law" }, // { path: "/py/law" },
{ path: "/py/reading" }, // { path: "/py/reading" },
]; // ];
router.push(routes[index].path).catch((err) => {}); // router.push(routes[index].path).catch((err) => {});
if (index == 0) {
router.push({
path: "/py/pyhome",
query: { categoryId: item.id, categoryTitle: item.categoryTitle },
});
} else {
router.push({
path: "/py/authority",
query: { categoryId: item.id, categoryTitle: item.categoryTitle },
});
}
activeIndex.value = index; activeIndex.value = index;
} }
</script> </script>
......
src/layout/wm.vue
...@@ -76,9 +76,10 @@ ...@@ -76,9 +76,10 @@
</div> </div>
<router-view></router-view> <router-view></router-view>
<Footer></Footer>
<!-- 页脚 --> <!-- 页脚 -->
<footer class="footer-footer py-12 mt-8"> <!-- <footer class="footer-footer py-12 mt-8">
<div class="w-[1440px] mx-auto px-6"> <div class="w-[1440px] mx-auto px-6">
<div class="grid grid-cols-3 gap-8 mb-8"> <div class="grid grid-cols-3 gap-8 mb-8">
<div> <div>
...@@ -117,7 +118,7 @@ ...@@ -117,7 +118,7 @@
<p>晋ICP备12345678号-1 | 晋公网安备 14010002000001号</p> <p>晋ICP备12345678号-1 | 晋公网安备 14010002000001号</p>
</div> </div>
</div> </div>
</footer> </footer> -->
</div> </div>
</div> </div>
</template> </template>
...@@ -136,6 +137,7 @@ import { ...@@ -136,6 +137,7 @@ import {
} from "@element-plus/icons-vue"; } from "@element-plus/icons-vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import Footer from "@/components/footer.vue";
const router = useRouter(); const router = useRouter();
......
src/stores/counter.ts
...@@ -10,3 +10,6 @@ export const useCounterStore = defineStore('counter', () => { ...@@ -10,3 +10,6 @@ export const useCounterStore = defineStore('counter', () => {
return { count, doubleCount, increment } return { count, doubleCount, increment }
}) })
src/utils/config.js
...@@ -34,3 +34,5 @@ export const pyzq = "pyzq"; // 辟谣专区 ...@@ -34,3 +34,5 @@ export const pyzq = "pyzq"; // 辟谣专区
export const zjjd = "zjjd"; // 专家解读 export const zjjd = "zjjd"; // 专家解读
export const flfg = "flfg"; // 法律法规 export const flfg = "flfg"; // 法律法规
export const dtsy = "dtsy"; // 读图识谣 export const dtsy = "dtsy"; // 读图识谣
src/utils/ruoyi.js
/** /**
* 通用js方法封装处理 * 通用js方法封装处理
* Copyright (c) 2019 ruoyi * Copyright (c) 2019 ruoyi
*/ */
import { ref } from "vue";
// 日期格式化 // 日期格式化
export function parseTime(time, pattern) { export function parseTime(time, pattern) {
if (arguments.length === 0 || !time) { if (arguments.length === 0 || !time) {
return null return null;
} }
const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}' const format = pattern || "{y}-{m}-{d} {h}:{i}:{s}";
let date let date;
if (typeof time === 'object') { if (typeof time === "object") {
date = time date = time;
} else { } else {
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) { if (typeof time === "string" && /^[0-9]+$/.test(time)) {
time = parseInt(time) time = parseInt(time);
} else if (typeof time === 'string') { } else if (typeof time === "string") {
time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), ''); time = time
.replace(new RegExp(/-/gm), "/")
.replace("T", " ")
.replace(new RegExp(/\.[\d]{3}/gm), "");
} }
if ((typeof time === 'number') && (time.toString().length === 10)) { if (typeof time === "number" && time.toString().length === 10) {
time = time * 1000 time = time * 1000;
} }
date = new Date(time) date = new Date(time);
} }
const formatObj = { const formatObj = {
y: date.getFullYear(), y: date.getFullYear(),
...@@ -32,18 +35,20 @@ export function parseTime(time, pattern) { ...@@ -32,18 +35,20 @@ export function parseTime(time, pattern) {
h: date.getHours(), h: date.getHours(),
i: date.getMinutes(), i: date.getMinutes(),
s: date.getSeconds(), s: date.getSeconds(),
a: date.getDay() a: date.getDay(),
} };
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => { const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key] let value = formatObj[key];
// Note: getDay() returns 0 on Sunday // Note: getDay() returns 0 on Sunday
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] } if (key === "a") {
return ["日", "一", "二", "三", "四", "五", "六"][value];
}
if (result.length > 0 && value < 10) { if (result.length > 0 && value < 10) {
value = '0' + value value = "0" + value;
} }
return value || 0 return value || 0;
}) });
return time_str return time_str;
} }
// 表单重置 // 表单重置
...@@ -56,14 +61,19 @@ export function resetForm(refName) { ...@@ -56,14 +61,19 @@ export function resetForm(refName) {
// 添加日期范围 // 添加日期范围
export function addDateRange(params, dateRange, propName) { export function addDateRange(params, dateRange, propName) {
let search = params; let search = params;
search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {}; search.params =
typeof search.params === "object" &&
search.params !== null &&
!Array.isArray(search.params)
? search.params
: {};
dateRange = Array.isArray(dateRange) ? dateRange : []; dateRange = Array.isArray(dateRange) ? dateRange : [];
if (typeof (propName) === 'undefined') { if (typeof propName === "undefined") {
search.params['beginTime'] = dateRange[0]; search.params["beginTime"] = dateRange[0];
search.params['endTime'] = dateRange[1]; search.params["endTime"] = dateRange[1];
} else { } else {
search.params['begin' + propName] = dateRange[0]; search.params["begin" + propName] = dateRange[0];
search.params['end' + propName] = dateRange[1]; search.params["end" + propName] = dateRange[1];
} }
return search; return search;
} }
...@@ -75,20 +85,20 @@ export function selectDictLabel(datas, value) { ...@@ -75,20 +85,20 @@ export function selectDictLabel(datas, value) {
} }
var actions = []; var actions = [];
Object.keys(datas).some((key) => { Object.keys(datas).some((key) => {
if (datas[key].value == ('' + value)) { if (datas[key].value == "" + value) {
actions.push(datas[key].label); actions.push(datas[key].label);
return true; return true;
} }
}) });
if (actions.length === 0) { if (actions.length === 0) {
actions.push(value); actions.push(value);
} }
return actions.join(''); return actions.join("");
} }
// 回显数据字典（字符串数组） // 回显数据字典（字符串数组）
export function selectDictLabels(datas, value, separator) { export function selectDictLabels(datas, value, separator) {
if (value === undefined || value.length ===0) { if (value === undefined || value.length === 0) {
return ""; return "";
} }
if (Array.isArray(value)) { if (Array.isArray(value)) {
...@@ -100,30 +110,32 @@ export function selectDictLabels(datas, value, separator) { ...@@ -100,30 +110,32 @@ export function selectDictLabels(datas, value, separator) {
Object.keys(value.split(currentSeparator)).some((val) => { Object.keys(value.split(currentSeparator)).some((val) => {
var match = false; var match = false;
Object.keys(datas).some((key) => { Object.keys(datas).some((key) => {
if (datas[key].value == ('' + temp[val])) { if (datas[key].value == "" + temp[val]) {
actions.push(datas[key].label + currentSeparator); actions.push(datas[key].label + currentSeparator);
match = true; match = true;
} }
}) });
if (!match) { if (!match) {
actions.push(temp[val] + currentSeparator); actions.push(temp[val] + currentSeparator);
} }
}) });
return actions.join('').substring(0, actions.join('').length - 1); return actions.join("").substring(0, actions.join("").length - 1);
} }
// 字符串格式化(%s ) // 字符串格式化(%s )
export function sprintf(str) { export function sprintf(str) {
var args = arguments, flag = true, i = 1; var args = arguments,
flag = true,
i = 1;
str = str.replace(/%s/g, function () { str = str.replace(/%s/g, function () {
var arg = args[i++]; var arg = args[i++];
if (typeof arg === 'undefined') { if (typeof arg === "undefined") {
flag = false; flag = false;
return ''; return "";
} }
return arg; return arg;
}); });
return flag ? str : ''; return flag ? str : "";
} }
// 转换字符串，undefined,null等转化为"" // 转换字符串，undefined,null等转化为""
...@@ -148,7 +160,7 @@ export function mergeRecursive(source, target) { ...@@ -148,7 +160,7 @@ export function mergeRecursive(source, target) {
} }
} }
return source; return source;
}; }
/** /**
* 构造树型结构数据 * 构造树型结构数据
...@@ -159,9 +171,9 @@ export function mergeRecursive(source, target) { ...@@ -159,9 +171,9 @@ export function mergeRecursive(source, target) {
*/ */
export function handleTree(data, id, parentId, children) { export function handleTree(data, id, parentId, children) {
let config = { let config = {
id: id || 'id', id: id || "id",
parentId: parentId || 'parentId', parentId: parentId || "parentId",
childrenList: children || 'children' childrenList: children || "children",
}; };
var childrenListMap = {}; var childrenListMap = {};
...@@ -202,19 +214,23 @@ export function handleTree(data, id, parentId, children) { ...@@ -202,19 +214,23 @@ export function handleTree(data, id, parentId, children) {
} }
/** /**
* 参数处理 * 参数处理
* @param {*} params 参数 * @param {*} params 参数
*/ */
export function tansParams(params) { export function tansParams(params) {
let result = '' let result = "";
for (const propName of Object.keys(params)) { for (const propName of Object.keys(params)) {
const value = params[propName]; const value = params[propName];
var part = encodeURIComponent(propName) + "="; var part = encodeURIComponent(propName) + "=";
if (value !== null && value !== "" && typeof (value) !== "undefined") { if (value !== null && value !== "" && typeof value !== "undefined") {
if (typeof value === 'object') { if (typeof value === "object") {
for (const key of Object.keys(value)) { for (const key of Object.keys(value)) {
if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') { if (
let params = propName + '[' + key + ']'; value[key] !== null &&
value[key] !== "" &&
typeof value[key] !== "undefined"
) {
let params = propName + "[" + key + "]";
var subPart = encodeURIComponent(params) + "="; var subPart = encodeURIComponent(params) + "=";
result += subPart + encodeURIComponent(value[key]) + "&"; result += subPart + encodeURIComponent(value[key]) + "&";
} }
...@@ -224,23 +240,24 @@ export function tansParams(params) { ...@@ -224,23 +240,24 @@ export function tansParams(params) {
} }
} }
} }
return result return result;
} }
// 返回项目路径 // 返回项目路径
export function getNormalPath(p) { export function getNormalPath(p) {
if (p.length === 0 || !p || p == 'undefined') { if (p.length === 0 || !p || p == "undefined") {
return p return p;
}; }
let res = p.replace('//', '/') let res = p.replace("//", "/");
if (res[res.length - 1] === '/') { if (res[res.length - 1] === "/") {
return res.slice(0, res.length - 1) return res.slice(0, res.length - 1);
} }
return res; return res;
} }
// 验证是否为blob格式 // 验证是否为blob格式
export function blobValidate(data) { export function blobValidate(data) {
return data.type !== 'application/json' return data.type !== "application/json";
} }
export const getActiveNav = ref(0);
src/views/home/announcements/Announcements.vue
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="flex items-center mb-1"> <div class="flex items-center mb-1">
<h3 <h3
class="text-blue-600 hover:text-blue-800 cursor-pointer text-lg font-medium truncate mr-2 line-clamp-2" class="text-black hover:text-blue-600 cursor-pointer text-lg font-medium truncate mr-2 line-clamp-2"
@click="goToDetail(item.id)" @click="goToDetail(item.id)"
> >
{{ item.contentTitle }} {{ item.contentTitle }}
...@@ -30,26 +30,26 @@ ...@@ -30,26 +30,26 @@
> >
<span class="text-sm text-gray-500 flex items-center"> <span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon> <el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} {{ item.contentHit }} 阅读
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 分页 --> </div>
<div class="flex justify-center mt-8"> <!-- 分页 -->
<el-pagination <div class="flex justify-center mt-8">
v-model:current-page="pageNo" <el-pagination
v-model:page-size="pageSize" v-model:current-page="pageNo"
background v-model:page-size="pageSize"
:total="total" background
:page-sizes="[10, 20, 30, 40]" :total="total"
layout="prev, pager, next" :page-sizes="[10, 20, 30, 40]"
@size-change="handleSizeChange" layout="prev, pager, next"
@current-change="handleCurrentChange" @size-change="handleSizeChange"
/> @current-change="handleCurrentChange"
</div> />
</div> </div>
</div> </div>
<div class="w-80 flex-shrink-0 space-y-6"> <div class="w-80 flex-shrink-0 space-y-6">
...@@ -66,12 +66,10 @@ ...@@ -66,12 +66,10 @@
class="group cursor-pointer" class="group cursor-pointer"
@click="goToDetail(item.id)" @click="goToDetail(item.id)"
> >
<div class="h-32 mb-2 overflow-hidden rounded-lg"> <div
<!-- <el-image v-if="item.images != null"
class="w-full h-full object-cover" class="h-32 mb-2 overflow-hidden rounded-lg"
:src="item.images" >
:fit="fit"
></el-image> -->
<img <img
:src="item.images" :src="item.images"
:alt="item.title" :alt="item.title"
...@@ -83,27 +81,49 @@ ...@@ -83,27 +81,49 @@
> >
{{ item.contentTitle }} {{ item.contentTitle }}
</div> </div>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 通知公告 --> <!-- 通知公告 -->
<div class="bg-white rounded-lg shadow-sm p-4"> <div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black"> <h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-orange-500"><Bell /></el-icon> <el-icon class="mr-2 text-blue-500"><Bell /></el-icon>
通知公告 通知公告
</h2> </h2>
<div class="space-y-3"> <div class="space-y-4">
<div <div
v-for="(item, index) in announcements" v-for="(item, index) in announcements"
:key="index" :key="index"
class="flex items-center space-x-2 group cursor-pointer" class="group cursor-pointer"
@click="goToDetail(item.id)" @click="getToDetail(item)"
> >
<el-tag size="small" :type="item.type">公告 </el-tag> <div
<span class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
class="text-sm group-hover:text-blue-600 flex-1 line-clamp-1 text-black"
>{{ item.contentTitle }}</span
> >
{{ item.contentTitle }}
</div>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -114,7 +134,15 @@ ...@@ -114,7 +134,15 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { ref } from "vue";
import { Search, Refresh, View } from "@element-plus/icons-vue"; import {
Clock,
Document,
View,
Star,
Location,
Bell,
ArrowRight,
} from "@element-plus/icons-vue";
import { getNewsList } from "@/api/home/news/list"; import { getNewsList } from "@/api/home/news/list";
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import { baseImageUrl, rdxw, sxxw, tzgg, tyxw } from "@/utils/config"; import { baseImageUrl, rdxw, sxxw, tzgg, tyxw } from "@/utils/config";
...@@ -146,7 +174,7 @@ const handleCurrentChange = (val: number) => { ...@@ -146,7 +174,7 @@ const handleCurrentChange = (val: number) => {
getList(pageSize.value, pageNo.value); getList(pageSize.value, pageNo.value);
}; };
getTyNewsList(3, 1); getTyNewsList(5, 1);
//获取太原新闻 //获取太原新闻
function getTyNewsList(pageSize: number, pageNo: number) { function getTyNewsList(pageSize: number, pageNo: number) {
......
src/views/home/detail/NewsDetail.vue
<template> <template>
<div class="min-h-screen bg-gray-50"> <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-4 py-8 w-[1440px]">
<bread-crumb <!-- <bread-crumb
:breadcrumbItems=" :breadcrumbItems="
route.query.titlePath == '-1' ? breadcrumbItems2 : breadcrumbItems route.query.titlePath == '-1' ? breadcrumbItems2 : breadcrumbItems
" "
/> /> -->
<div class="mb-6">
<el-breadcrumb :separator-icon="ArrowRight">
<el-breadcrumb-item :to="{ path: '/home/home' }"
>首页</el-breadcrumb-item
>
<el-breadcrumb-item
v-if="route.query.type != '0'"
:to="{
path: '/home/news',
query: {
categoryTitle: route.query.categoryTitle,
categoryId: route.query.categoryId,
},
}"
>{{ route.query.categoryTitle }}
</el-breadcrumb-item>
<el-breadcrumb-item>详情</el-breadcrumb-item>
</el-breadcrumb>
</div>
<!-- 主要内容区 --> <!-- 主要内容区 -->
<div class="grid grid-cols-3 gap-8"> <div class="grid grid-cols-3 gap-8">
<!-- 左侧主要新闻内容 --> <!-- 左侧主要新闻内容 -->
...@@ -33,7 +52,39 @@ ...@@ -33,7 +52,39 @@
</div> </div>
<!-- 右侧边栏 --> <!-- 右侧边栏 -->
<div class="space-y-6"> <div class="space-y-3">
<!-- 通知公告 -->
<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"><Bell /></el-icon>
通知公告
</h2>
<div class="space-y-4">
<div
v-for="(item, index) in announcements"
:key="index"
class="group cursor-pointer"
@click="getToDetail(item)"
>
<div
class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ item.contentTitle }}
</div>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div>
</div>
</div>
<!-- 热点新闻 --> <!-- 热点新闻 -->
<div class="bg-white rounded-lg shadow-sm p-6"> <div class="bg-white rounded-lg shadow-sm p-6">
<h2 class="text-xl font-bold mb-4 flex items-center text-black"> <h2 class="text-xl font-bold mb-4 flex items-center text-black">
...@@ -62,28 +113,59 @@ ...@@ -62,28 +113,59 @@
> >
{{ item.contentTitle }} {{ item.contentTitle }}
</h3> </h3>
<p class="text-sm text-gray-500">{{ item.contentDatetime }}</p> <div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 本地新闻 -->
<!-- 通知公告 --> <div class="bg-white rounded-lg shadow-sm p-3">
<div class="bg-white rounded-lg shadow-sm p-6 text-black"> <h2 class="text-xl font-bold mb-4 flex items-center text-black">
<h2 class="text-xl font-bold mb-4 flex items-center"> <el-icon class="mr-2 text-blue-500"><Location /></el-icon>
<el-icon class="text-yellow-500 mr-2"><Bell /></el-icon> 太原新闻
通知公告
</h2> </h2>
<div class="space-y-3"> <div class="space-y-4">
<div <div
v-for="(item, index) in announcements" v-for="(item, index) in tyNews"
:key="index" :key="index"
class="flex items-center space-x-2 group cursor-pointer" class="group cursor-pointer"
@click="itemTyClick(item)" @click="getToDetail(item)"
> >
<el-icon><Document /></el-icon> <div
<span class="text-sm group-hover:text-blue-600">{{ v-if="item.images != null"
item.contentTitle class="h-32 mb-2 overflow-hidden rounded-lg"
}}</span> >
<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 class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -114,6 +196,7 @@ import { ...@@ -114,6 +196,7 @@ import {
TY_XW_ID, TY_XW_ID,
SX_XW_ID, SX_XW_ID,
TZ_GG_ID, TZ_GG_ID,
tyxw,
} from "@/utils/config"; } from "@/utils/config";
import { getNewsList } from "@/api/home/news/list"; import { getNewsList } from "@/api/home/news/list";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue"; import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
...@@ -121,25 +204,11 @@ import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue"; ...@@ -121,25 +204,11 @@ import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const breadcrumbItems = ref([
{ title: "首页", path: "/home/home", contentTitle: "" },
{
title: route.query.title,
path: route.query.titlePath,
contentTitle: route.query.contentTitle,
},
{ title: "详情", path: "", contentTitle: "" },
]);
const breadcrumbItems2 = ref([
{ title: "首页", path: "/home/home" },
{ title: "详情", path: "" },
]);
const hotNews = ref([]); const hotNews = ref([]);
const announcements = ref([]); const announcements = ref([]);
const tyNews = ref([]);
getHotsNewsList(3, 1); getHotsNewsList(5, 1);
//获取太原新闻 //获取太原新闻
function getHotsNewsList(pageSize: number, pageNo: number) { function getHotsNewsList(pageSize: number, pageNo: number) {
...@@ -160,6 +229,26 @@ function getHotsNewsList(pageSize: number, pageNo: number) { ...@@ -160,6 +229,26 @@ function getHotsNewsList(pageSize: number, pageNo: number) {
hotNews.value = rowsList; hotNews.value = rowsList;
}); });
} }
getTyNewsList(5, 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;
});
}
function itemTyClick(item: any) { function itemTyClick(item: any) {
if (item.contentOutLink) { if (item.contentOutLink) {
......
src/views/home/home/HomeView.vue
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold" style="color: #000">太原新闻</h2> <h2 class="text-xl font-bold" style="color: #000">太原新闻</h2>
<el-button <el-button
v-if="true" v-if="tyNews.length > 0"
type="primary" type="primary"
class="!rounded-button" class="!rounded-button"
text text
...@@ -79,14 +79,9 @@ ...@@ -79,14 +79,9 @@
<div <div
v-for="(item, index) in tyNews" v-for="(item, index) in tyNews"
:key="index" :key="index"
class="flex items-start space-x-4 pb-4 border-b last:border-0" class="flex items-start space-x-4 pb-1 border-b last:border-0"
@click="goToDetail(item)"
> >
>
<!-- <el-image
class="w-102 h-24 object-cover rounded"
:src="item.images"
fit="fill"
/> -->
<img <img
v-if="item.images != null" v-if="item.images != null"
:src="item.images" :src="item.images"
...@@ -94,17 +89,32 @@ ...@@ -94,17 +89,32 @@
/> />
<div> <div>
<h3 <el-tooltip
class="text-lg font-medium mb-2 hover:text-blue-600 cursor-pointer text-black line-clamp-2" popper-class="tooltip-width"
@click="goToDetail(item)" effect="dark"
:content="item.contentTitle"
placement="top-start"
> >
{{ item.contentTitle }} <h3
</h3> class="text-lg font-medium mb-2 hover:text-blue-600 cursor-pointer text-black line-clamp-1"
<p class="text-gray-600 text-sm line-clamp-3"> >
{{ item.contentTitle }}
</h3>
</el-tooltip>
<p class="text-gray-600 text-sm line-clamp-2">
{{ item.contentDescription }} {{ item.contentDescription }}
</p> </p>
<div class="mt-2 text-sm text-gray-500"> <div class="mt-1 flex items-center space-x-4">
{{ item.contentDatetime }} <span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -117,7 +127,7 @@ ...@@ -117,7 +127,7 @@
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold" style="color: #000">热门新闻</h2> <h2 class="text-xl font-bold" style="color: #000">热门新闻</h2>
<el-button <el-button
v-if="true" v-if="hotNews.length > 0"
type="primary" type="primary"
class="!rounded-button" class="!rounded-button"
text text
...@@ -130,15 +140,36 @@ ...@@ -130,15 +140,36 @@
v-for="(hot, index) in hotNews" v-for="(hot, index) in hotNews"
:key="index" :key="index"
class="border-b last:border-0 pb-4" class="border-b last:border-0 pb-4"
@click="goToDetail(hot)"
> >
<h3 <div>
class="text-base font-medium hover:text-blue-600 cursor-pointer text-black line-clamp-2" <el-tooltip
@click="goToDetail(hot)" popper-class="tooltip-width"
> effect="dark"
{{ hot.contentTitle }} :content="hot.contentTitle"
</h3> placement="top-start"
<div class="mt-2 text-sm text-gray-500"> >
{{ hot.contentDatetime }} <h3
class="text-lg font-medium mb-2 hover:text-blue-600 cursor-pointer text-black line-clamp-1"
>
{{ hot.contentTitle }}
</h3>
</el-tooltip>
<p class="text-gray-600 text-sm line-clamp-2">
{{ hot.contentDescription }}
</p>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ hot.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ hot.contentHit }} 阅读
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -182,6 +213,7 @@ ...@@ -182,6 +213,7 @@
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold text-black">权威发布</h2> <h2 class="text-xl font-bold text-black">权威发布</h2>
<el-button <el-button
v-if="authoritativeNews.length > 0"
type="primary" type="primary"
class="!rounded-button" class="!rounded-button"
text text
...@@ -197,14 +229,33 @@ ...@@ -197,14 +229,33 @@
@click="goToDetail(item)" @click="goToDetail(item)"
> >
<!-- <el-icon class="text-blue-600 text-xl"><Document /></el-icon> --> <!-- <el-icon class="text-blue-600 text-xl"><Document /></el-icon> -->
<div class="flex-1"> <div>
<h3 <el-tooltip
class="text-base font-medium hover:text-blue-600 cursor-pointer text-black line-clamp-2" popper-class="tooltip-width"
effect="dark"
:content="item.contentTitle"
placement="top-start"
> >
{{ item.contentTitle }} <h3
</h3> class="text-lg font-medium mb-2 hover:text-blue-600 cursor-pointer text-black line-clamp-1"
<div class="mt-1 text-sm text-gray-500"> >
{{ item.contentDatetime }} {{ item.contentTitle }}
</h3>
</el-tooltip>
<p class="text-gray-600 text-sm line-clamp-2">
{{ item.contentDescription }}
</p>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -215,6 +266,7 @@ ...@@ -215,6 +266,7 @@
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold text-black">辟谣专区</h2> <h2 class="text-xl font-bold text-black">辟谣专区</h2>
<el-button <el-button
v-if="rumourNews.length > 0"
type="primary" type="primary"
class="!rounded-button" class="!rounded-button"
text text
...@@ -229,9 +281,8 @@ ...@@ -229,9 +281,8 @@
class="flex items-start space-x-3 pb-4 border-b last:border-b-0" class="flex items-start space-x-3 pb-4 border-b last:border-b-0"
@click="goToDetail(item)" @click="goToDetail(item)"
> >
<div class="flex-shrink-0 w-24 h-16"> <div v-if="item.images != null" class="flex-shrink-0 w-24 h-16">
<img <img
v-if="item.images != null"
:src="item.images" :src="item.images"
class="w-full h-full object-cover rounded" class="w-full h-full object-cover rounded"
/> />
...@@ -241,15 +292,34 @@ ...@@ -241,15 +292,34 @@
<el-tag size="small" type="danger" class="!rounded-full" <el-tag size="small" type="danger" class="!rounded-full"
>辟谣</el-tag >辟谣</el-tag
> >
<h3 <el-tooltip
class="text-base font-medium hover:text-blue-600 cursor-pointer text-black line-clamp-2" popper-class="tooltip-width"
effect="dark"
:content="item.contentTitle"
placement="top-start"
> >
{{ item.contentTitle }} <h3
</h3> class="text-base font-medium hover:text-blue-600 cursor-pointer text-black line-clamp-1"
>
{{ item.contentTitle }}
</h3>
</el-tooltip>
</div> </div>
<p class="mt-1 text-sm text-gray-500 line-clamp-3"> <p class="mt-1 text-sm text-gray-500 line-clamp-2">
{{ item.contentDescription }} {{ item.contentDescription }}
</p> </p>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -286,8 +356,15 @@ import { ...@@ -286,8 +356,15 @@ import {
Share, Share,
Link, Link,
Search, Search,
Clock,
Document, Document,
View,
Star,
Location,
Bell,
ArrowRight,
} from "@element-plus/icons-vue"; } from "@element-plus/icons-vue";
import "swiper/css"; import "swiper/css";
import "swiper/css/pagination"; import "swiper/css/pagination";
import "swiper/css/autoplay"; import "swiper/css/autoplay";
...@@ -305,6 +382,7 @@ import { ...@@ -305,6 +382,7 @@ import {
pyzq, pyzq,
qwfb, qwfb,
} from "@/utils/config"; } from "@/utils/config";
import PyNewsList from "@/components/news/PyNewsList.vue";
const router = useRouter(); const router = useRouter();
const swiperModules = [Pagination, Autoplay]; const swiperModules = [Pagination, Autoplay];
...@@ -360,7 +438,6 @@ function goToDetail(item: any) { ...@@ -360,7 +438,6 @@ function goToDetail(item: any) {
router.push({ router.push({
path: "/home/news/detail", path: "/home/news/detail",
query: { query: {
titlePath: "-1",
type: 0, type: 0,
id: item.id, id: item.id,
}, },
...@@ -372,9 +449,11 @@ function goToTyMoreList(index: number) { ...@@ -372,9 +449,11 @@ function goToTyMoreList(index: number) {
switch (index) { switch (index) {
case 1: //太原新闻-更多 case 1: //太原新闻-更多
router.push({ router.push({
path: "/home/tynews", path: "/home/news",
query: { query: {
type: 0, categoryTitle: "太原新闻",
categoryId: tyNews != null ? tyNews.value[0].categoryId : "0",
activeNav: 0,
}, },
}); });
break; break;
...@@ -382,16 +461,21 @@ function goToTyMoreList(index: number) { ...@@ -382,16 +461,21 @@ function goToTyMoreList(index: number) {
router.push({ router.push({
path: "/home/news", path: "/home/news",
query: { query: {
type: 1, categoryTitle: "热门新闻",
categoryId: tyNews != null ? hotNews.value[0].categoryId : "0",
activeNav: 1,
}, },
}); });
break; break;
case 3: //辟谣专区-更多 case 3: //权威发布-更多
// 打开新标签 // 打开新标签
let routeData1 = router.resolve({ let routeData1 = router.resolve({
path: "/py/authority", path: "/py/authority",
query: { query: {
type: 1, categoryTitle: "权威发布",
categoryId:
tyNews != null ? authoritativeNews.value[0].categoryId : "0",
activeNav: 2,
}, },
}); });
window.open(routeData1.href, "_blank"); window.open(routeData1.href, "_blank");
...@@ -401,7 +485,9 @@ function goToTyMoreList(index: number) { ...@@ -401,7 +485,9 @@ function goToTyMoreList(index: number) {
let routeData2 = router.resolve({ let routeData2 = router.resolve({
path: "/py/rumor", path: "/py/rumor",
query: { query: {
type: 1, categoryTitle: "辟谣专区",
categoryId: tyNews != null ? rumourNews.value[0].categoryId : "0",
activeNav: 3,
}, },
}); });
window.open(routeData2.href, "_blank"); window.open(routeData2.href, "_blank");
...@@ -426,7 +512,7 @@ function getHotsNewsList(pageSize: number, pageNo: number) { ...@@ -426,7 +512,7 @@ function getHotsNewsList(pageSize: number, pageNo: number) {
}); });
} }
getQwList(4, 1); getQwList(5, 1);
//获取权威发布 //获取权威发布
function getQwList(pageSize: number, pageNo: number) { function getQwList(pageSize: number, pageNo: number) {
...@@ -518,7 +604,11 @@ const quickEntries = [ ...@@ -518,7 +604,11 @@ const quickEntries = [
}, },
]; ];
</script> </script>
<style scoped> <style>
.tooltip-width {
max-width: 800px;
font-size: 14px;
}
.swiper { .swiper {
--swiper-theme-color: #ffffff; --swiper-theme-color: #ffffff;
--swiper-pagination-bullet-inactive-color: #ffffff; --swiper-pagination-bullet-inactive-color: #ffffff;
......
src/views/home/hotnews/News.vue
...@@ -2,7 +2,24 @@ ...@@ -2,7 +2,24 @@
<template> <template>
<div class="min-h-screen bg-gray-50"> <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-4 py-8 w-[1440px]">
<bread-crumb :breadcrumbItems="breadcrumbItems" /> <!-- <bread-crumb :breadcrumbItems="breadcrumbItems" /> -->
<div class="mb-6">
<el-breadcrumb :separator-icon="ArrowRight">
<el-breadcrumb-item
:to="{
path: '/home/home',
// query: {
// categoryTitle: '首页',
// categoryId: '999',
// },
}"
>首页</el-breadcrumb-item
>
<el-breadcrumb-item>{{
route.query.categoryTitle
}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="flex gap-6"> <div class="flex gap-6">
<div class="flex-1"> <div class="flex-1">
...@@ -13,15 +30,17 @@ ...@@ -13,15 +30,17 @@
class="group p-4 flex items-start border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer" class="group p-4 flex items-start border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer"
@click="getToDetail(news)" @click="getToDetail(news)"
> >
<div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg"> <div
v-if="news.images != null"
class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg me-5"
>
<el-image <el-image
v-if="news.images != null"
class="w-full h-full object-cover" class="w-full h-full object-cover"
:src="news.images" :src="news.images"
fit="fill" fit="fill"
/> />
</div> </div>
<div class="flex-grow px-6"> <div class="flex-grow">
<h2 <h2
class="text-lg font-semibold mb-2 group-hover:text-blue-600 line-clamp-2 text-black" class="text-lg font-semibold mb-2 group-hover:text-blue-600 line-clamp-2 text-black"
> >
...@@ -57,16 +76,6 @@ ...@@ -57,16 +76,6 @@
</div> </div>
</div> </div>
<div class="flex justify-center mt-8"> <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 <el-pagination
v-model:current-page="pageNo" v-model:current-page="pageNo"
v-model:page-size="pageSize" v-model:page-size="pageSize"
...@@ -80,27 +89,54 @@ ...@@ -80,27 +89,54 @@
</div> </div>
</div> </div>
<div class="w-80 flex-shrink-0 space-y-6"> <div class="w-80 flex-shrink-0 space-y-6">
<!-- 本地新闻 -->
<div class="bg-white rounded-lg shadow-sm p-4"> <div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black"> <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-blue-500"><Bell /></el-icon>
太原新闻 通知公告
</h2> </h2>
<div class="space-y-4"> <div class="space-y-4">
<div <div
v-for="(item, index) in tyNews" v-for="(item, index) in announcements"
:key="index" :key="index"
class="group cursor-pointer" class="group cursor-pointer"
@click="getToDetail(item)" @click="getToDetail(item)"
> >
<div class="h-32 mb-2 overflow-hidden rounded-lg"> <div
<!-- <el-image class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
class="w-full h-full object-cover" >
:src="item.images" {{ item.contentTitle }}
:fit="fit" </div>
></el-image> --> <div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</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-red-500"><Star /></el-icon>
热点新闻
</h2>
<div class="space-y-4">
<div
v-for="(item, index) in hotNews"
:key="index"
class="group cursor-pointer"
@click="getToDetail(item)"
>
<div
v-if="item.images != null"
class="h-32 mb-2 overflow-hidden rounded-lg"
>
<img <img
v-if="item.images != null"
:src="item.images" :src="item.images"
:alt="item.title" :alt="item.title"
class="w-full h-full object-cover" class="w-full h-full object-cover"
...@@ -111,27 +147,59 @@ ...@@ -111,27 +147,59 @@
> >
{{ item.contentTitle }} {{ item.contentTitle }}
</div> </div>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 通知公告 --> <!-- 本地新闻 -->
<div class="bg-white rounded-lg shadow-sm p-4"> <div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black"> <h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-orange-500"><Bell /></el-icon> <el-icon class="mr-2 text-blue-500"><Location /></el-icon>
通知公告 太原新闻
</h2> </h2>
<div class="space-y-3"> <div class="space-y-4">
<div <div
v-for="(item, index) in announcements" v-for="(item, index) in tyNews"
:key="index" :key="index"
class="flex items-center space-x-2 group cursor-pointer" class="group cursor-pointer"
@click="getToDetail(item)" @click="getToDetail(item)"
> >
<el-tag size="small" :type="item.type">公告 </el-tag> <div
<span v-if="item.images != null"
class="text-sm group-hover:text-blue-600 flex-1 line-clamp-1 text-black" class="h-32 mb-2 overflow-hidden rounded-lg"
>{{ item.contentTitle }}</span
> >
<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 class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -155,16 +223,19 @@ import { ...@@ -155,16 +223,19 @@ import {
} from "@element-plus/icons-vue"; } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue"; import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
import { watch } from "vue";
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const pageNo = ref(1); const pageNo = ref(1);
const pageSize = ref(10); const pageSize = ref(10);
const total = ref(0); const total = ref(0);
const breadcrumbItems = ref([ // const categoryTitle = ref();
{ title: "首页", path: "/home/home" },
{ title: "热点新闻" }, // const breadcrumbItems = ref([
]); // { title: "首页", path: "/home/home" },
// { title: categoryTitle },
// ]);
const handleSizeChange = (val: number) => { const handleSizeChange = (val: number) => {
pageSize.value = val; pageSize.value = val;
...@@ -178,6 +249,29 @@ const handleCurrentChange = (val: number) => { ...@@ -178,6 +249,29 @@ const handleCurrentChange = (val: number) => {
const newsList = ref([]); const newsList = ref([]);
const tyNews = ref([]); const tyNews = ref([]);
const announcements = ref([]); const announcements = ref([]);
const hotNews = ref([]);
getHotsNewsList(3, 1);
//获取太原新闻
function getHotsNewsList(pageSize: number, pageNo: number) {
const datas = {
contentDisplay: "0",
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);
}
});
hotNews.value = rowsList;
});
}
getTyNewsList(3, 1); getTyNewsList(3, 1);
...@@ -221,6 +315,14 @@ function getTzGgNewsList(pageSize: number, pageNo: number) { ...@@ -221,6 +315,14 @@ function getTzGgNewsList(pageSize: number, pageNo: number) {
}); });
} }
watch(
() => route.query.categoryId,
(newVal, oldVal) => {
// categoryTitle.value = route.query.categoryTitle;
getList(pageSize.value, pageNo.value);
}
);
getList(pageSize.value, pageNo.value); getList(pageSize.value, pageNo.value);
//获取新闻热点列表 //获取新闻热点列表
...@@ -228,7 +330,7 @@ function getList(pageSize: number, pageNo: number) { ...@@ -228,7 +330,7 @@ function getList(pageSize: number, pageNo: number) {
// newsList.value = []; // newsList.value = [];
const datas = { const datas = {
contentDisplay: "0", contentDisplay: "0",
contentType: rdxw, categoryId: route.query.categoryId,
pageSize: pageSize, pageSize: pageSize,
pageNo: pageNo, pageNo: pageNo,
}; };
...@@ -254,8 +356,9 @@ function getToDetail(item: any) { ...@@ -254,8 +356,9 @@ function getToDetail(item: any) {
router.push({ router.push({
path: "/home/news/detail", path: "/home/news/detail",
query: { query: {
title: "热点新闻", categoryTitle: route.query.categoryTitle,
titlePath: "/home/news", // titlePath: "/home/news",
categoryId: route.query.categoryId,
type: 1, type: 1,
id: item.id, id: item.id,
}, },
......
src/views/home/jb/Jb.vue
...@@ -137,15 +137,15 @@ ...@@ -137,15 +137,15 @@
</h3> </h3>
<ul class="space-y-2 text-gray-700"> <ul class="space-y-2 text-gray-700">
<li class="flex items-center"> <li class="flex items-center">
<el-icon class="mr-2"><Phone /></el-icon> <!-- <el-icon class="mr-2"><Phone /></el-icon> -->
举报电话：0351-8222236 举报电话：0351-8222236
</li> </li>
<li class="flex items-center"> <li class="flex items-center">
<el-icon class="mr-2"><Message /></el-icon> <!-- <el-icon class="mr-2"><Message /></el-icon> -->
举报传真：0351-8222234 举报传真：0351-8222234
</li> </li>
<li class="flex items-center"> <li class="flex items-center">
<el-icon class="mr-2"><Message /></el-icon> <!-- <el-icon class="mr-2"><Message /></el-icon> -->
举报邮箱：tyhlwjb@163.com 举报邮箱：tyhlwjb@163.com
</li> </li>
</ul> </ul>
...@@ -154,11 +154,11 @@ ...@@ -154,11 +154,11 @@
<h3 class="font-medium mb-4 text-black">太原新闻网</h3> <h3 class="font-medium mb-4 text-black">太原新闻网</h3>
<ul class="space-y-2 text-gray-700"> <ul class="space-y-2 text-gray-700">
<li class="flex items-center"> <li class="flex items-center">
<el-icon class="mr-2"><Phone /></el-icon> <!-- <el-icon class="mr-2"><Phone /></el-icon> -->
举报电话：0351-8222094 举报电话：0351-8222094
</li> </li>
<li class="flex items-center"> <li class="flex items-center">
<el-icon class="mr-2"><Message /></el-icon> <!-- <el-icon class="mr-2"><Message /></el-icon> -->
举报邮箱：news1950@126.com 举报邮箱：news1950@126.com
</li> </li>
</ul> </ul>
......
src/views/home/search/SearchList.vue
...@@ -13,7 +13,10 @@ ...@@ -13,7 +13,10 @@
class="group p-4 flex items-start border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer" class="group p-4 flex items-start border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer"
@click="getToDetail(news)" @click="getToDetail(news)"
> >
<div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg"> <div
v-if="news.images != null"
class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg"
>
<el-image <el-image
class="w-full h-full object-cover" class="w-full h-full object-cover"
:src="news.images" :src="news.images"
...@@ -40,7 +43,7 @@ ...@@ -40,7 +43,7 @@
</span> --> </span> -->
<span class="text-sm text-gray-500 flex items-center"> <span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon> <el-icon class="mr-1"><View /></el-icon>
{{ news.contentHit }} {{ news.contentHit }} 阅读
</span> </span>
</div> </div>
</div> </div>
...@@ -56,16 +59,6 @@ ...@@ -56,16 +59,6 @@
</div> </div>
</div> </div>
<div class="flex justify-center mt-8"> <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 <el-pagination
v-model:current-page="pageNo" v-model:current-page="pageNo"
v-model:page-size="pageSize" v-model:page-size="pageSize"
...@@ -92,12 +85,10 @@ ...@@ -92,12 +85,10 @@
class="group cursor-pointer" class="group cursor-pointer"
@click="getToDetail(item)" @click="getToDetail(item)"
> >
<div class="h-32 mb-2 overflow-hidden rounded-lg"> <div
<!-- <el-image v-if="item.images != null"
class="w-full h-full object-cover" class="h-32 mb-2 overflow-hidden rounded-lg"
:src="item.images" >
:fit="fit"
></el-image> -->
<img <img
:src="item.images" :src="item.images"
:alt="item.title" :alt="item.title"
...@@ -109,27 +100,49 @@ ...@@ -109,27 +100,49 @@
> >
{{ item.contentTitle }} {{ item.contentTitle }}
</div> </div>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 通知公告 --> <!-- 通知公告 -->
<div class="bg-white rounded-lg shadow-sm p-4"> <div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black"> <h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-orange-500"><Bell /></el-icon> <el-icon class="mr-2 text-blue-500"><Bell /></el-icon>
通知公告 通知公告
</h2> </h2>
<div class="space-y-3"> <div class="space-y-4">
<div <div
v-for="(item, index) in announcements" v-for="(item, index) in announcements"
:key="index" :key="index"
class="flex items-center space-x-2 group cursor-pointer" class="group cursor-pointer"
@click="getToDetail(item)" @click="getToDetail(item)"
> >
<el-tag size="small" :type="item.type">公告 </el-tag> <div
<span class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
class="text-sm group-hover:text-blue-600 flex-1 line-clamp-1 text-black"
>{{ item.contentTitle }}</span
> >
{{ item.contentTitle }}
</div>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -180,7 +193,7 @@ const newsList = ref([]); ...@@ -180,7 +193,7 @@ const newsList = ref([]);
const tyNews = ref([]); const tyNews = ref([]);
const announcements = ref([]); const announcements = ref([]);
getTyNewsList(3, 1); getTyNewsList(5, 1);
//获取太原新闻 //获取太原新闻
function getTyNewsList(pageSize: number, pageNo: number) { function getTyNewsList(pageSize: number, pageNo: number) {
......
src/views/home/sxnews/ShanxiNews.vue
...@@ -13,15 +13,17 @@ ...@@ -13,15 +13,17 @@
class="group p-4 flex items-start border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer" class="group p-4 flex items-start border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer"
@click="getToDetail(news)" @click="getToDetail(news)"
> >
<div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg"> <div
v-if="news.images != null"
class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg me-5"
>
<el-image <el-image
v-if="news.images != null"
class="w-full h-full object-cover" class="w-full h-full object-cover"
:src="news.images" :src="news.images"
fit="fill" fit="fill"
/> />
</div> </div>
<div class="flex-grow px-6"> <div class="flex-grow">
<h2 <h2
class="text-lg font-semibold mb-2 group-hover:text-blue-600 line-clamp-2 text-black" class="text-lg font-semibold mb-2 group-hover:text-blue-600 line-clamp-2 text-black"
> >
...@@ -41,7 +43,7 @@ ...@@ -41,7 +43,7 @@
</span> --> </span> -->
<span class="text-sm text-gray-500 flex items-center"> <span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon> <el-icon class="mr-1"><View /></el-icon>
{{ news.contentHit }} {{ news.contentHit }} 阅读
</span> </span>
</div> </div>
</div> </div>
...@@ -89,31 +91,49 @@ ...@@ -89,31 +91,49 @@
> >
{{ item.contentTitle }} {{ item.contentTitle }}
</div> </div>
<div class="text-xs text-gray-500 mt-1">
{{ item.contentHit }} 阅读 <div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 通知公告 -->
<div class="bg-white rounded-lg shadow-sm p-4"> <div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black"> <h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-orange-500"><Bell /></el-icon> <el-icon class="mr-2 text-blue-500"><Bell /></el-icon>
通知公告 通知公告
</h2> </h2>
<div class="space-y-3"> <div class="space-y-4">
<div <div
v-for="(item, index) in announcements" v-for="(item, index) in announcements"
:key="index" :key="index"
class="flex items-center space-x-2 group cursor-pointer" class="group cursor-pointer"
@click="getToDetail(item)" @click="getToDetail(item)"
> >
<el-tag size="small" :type="item.type">公告</el-tag> <div
<span class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
class="text-sm group-hover:text-blue-600 flex-1 line-clamp-1 text-black"
>{{ item.contentTitle }}</span
> >
{{ item.contentTitle }}
</div>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -163,7 +183,7 @@ const newsList = ref([]); ...@@ -163,7 +183,7 @@ const newsList = ref([]);
const hotNews = ref([]); const hotNews = ref([]);
const announcements = ref([]); const announcements = ref([]);
getHotsNewsList(3, 1); getHotsNewsList(5, 1);
//获取太原新闻 //获取太原新闻
function getHotsNewsList(pageSize: number, pageNo: number) { function getHotsNewsList(pageSize: number, pageNo: number) {
......
src/views/home/tynews/TaiyuanNews.vue
...@@ -13,15 +13,17 @@ ...@@ -13,15 +13,17 @@
class="group p-4 flex items-start border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer" class="group p-4 flex items-start border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer"
@click="getToDetail(news)" @click="getToDetail(news)"
> >
<div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg"> <div
v-if="news.images != null"
class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg me-5"
>
<el-image <el-image
v-if="news.images != null"
class="w-full h-full object-cover" class="w-full h-full object-cover"
:src="news.images" :src="news.images"
fit="fill" fit="fill"
/> />
</div> </div>
<div class="flex-grow px-6"> <div class="flex-grow">
<h2 <h2
class="text-lg font-semibold mb-2 group-hover:text-blue-600 line-clamp-2 text-black" class="text-lg font-semibold mb-2 group-hover:text-blue-600 line-clamp-2 text-black"
> >
...@@ -41,7 +43,7 @@ ...@@ -41,7 +43,7 @@
</span> --> </span> -->
<span class="text-sm text-gray-500 flex items-center"> <span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon> <el-icon class="mr-1"><View /></el-icon>
{{ news.contentHit }} {{ news.contentHit }} 阅读
</span> </span>
</div> </div>
</div> </div>
...@@ -89,8 +91,16 @@ ...@@ -89,8 +91,16 @@
> >
{{ item.contentTitle }} {{ item.contentTitle }}
</div> </div>
<div class="text-xs text-gray-500 mt-1"> <div class="mt-1 flex items-center space-x-4">
{{ item.contentHit }} 阅读 <span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -99,21 +109,32 @@ ...@@ -99,21 +109,32 @@
<!-- 通知公告 --> <!-- 通知公告 -->
<div class="bg-white rounded-lg shadow-sm p-4"> <div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black"> <h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-orange-500"><Bell /></el-icon> <el-icon class="mr-2 text-blue-500"><Bell /></el-icon>
通知公告 通知公告
</h2> </h2>
<div class="space-y-3"> <div class="space-y-4">
<div <div
v-for="(item, index) in announcements" v-for="(item, index) in announcements"
:key="index" :key="index"
class="flex items-center space-x-2 group cursor-pointer" class="group cursor-pointer"
@click="getToDetail(item)" @click="getToDetail(item)"
> >
<el-tag size="small" :type="item.type">公告</el-tag> <div
<span class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
class="text-sm group-hover:text-blue-600 flex-1 line-clamp-1 text-black"
>{{ item.contentTitle }}</span
> >
{{ item.contentTitle }}
</div>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -163,7 +184,7 @@ const newsList = ref([]); ...@@ -163,7 +184,7 @@ const newsList = ref([]);
const hotNews = ref([]); const hotNews = ref([]);
const announcements = ref([]); const announcements = ref([]);
getHotsNewsList(3, 1); getHotsNewsList(5, 1);
//获取太原新闻 //获取太原新闻
function getHotsNewsList(pageSize: number, pageNo: number) { function getHotsNewsList(pageSize: number, pageNo: number) {
......
src/views/py/authority/Authority.vue
<!-- 权威发布 --> <!-- 权威发布 -->
<template> <template>
<div> <div>
<news-list <news-list />
title="权威发布"
pathType="/py/authority"
title1="辟谣专区"
title2="专家解读"
title3="法律法规"
:type0="qwfb"
:type1="pyzq"
:type2="zjjd"
:type3="flfg"
/>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
......
src/views/py/detail/NewsDetail.vue
<template> <template>
<div class="min-h-screen bg-gray-50"> <div class="min-h-screen bg-gray-50">
<div class="w-[1440px] mx-auto px-0 py-5"> <div class="w-[1440px] mx-auto px-0 py-5">
<bread-crumb <!-- <bread-crumb
:breadcrumbItems=" :breadcrumbItems="
route.query.pathType == '-1' ? breadcrumbItems2 : breadcrumbItems route.query.pathType == '-1' ? breadcrumbItems2 : breadcrumbItems
" "
/> /> -->
<div class="mb-6">
<el-breadcrumb :separator-icon="ArrowRight">
<el-breadcrumb-item :to="{ path: '/py/pyhome' }"
>首页</el-breadcrumb-item
>
<el-breadcrumb-item
v-if="route.query.type != '0'"
:to="{
path: '/py/authority',
query: {
categoryTitle: route.query.categoryTitle,
categoryId: route.query.categoryId,
},
}"
>{{ route.query.categoryTitle }}
</el-breadcrumb-item>
<el-breadcrumb-item>详情</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="grid grid-cols-3 gap-8"> <div class="grid grid-cols-3 gap-8">
<!-- 左侧主要新闻内容 --> <!-- 左侧主要新闻内容 -->
<div class="col-span-2 bg-white rounded-lg shadow-sm p-6"> <div class="col-span-2 bg-white rounded-lg shadow-sm p-6">
...@@ -33,12 +51,57 @@ ...@@ -33,12 +51,57 @@
</div> </div>
<!-- 右侧边栏 --> <!-- 右侧边栏 -->
<div class="space-y-6"> <div class="space-y-3">
<!-- 热点新闻 --> <!-- 权威发布 -->
<div class="bg-white rounded-lg shadow-sm p-6"> <div class="bg-white rounded-lg shadow-sm p-6">
<h2 class="text-xl font-bold mb-4 flex items-center text-black"> <h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="text-red-500 mr-2"><Star /></el-icon> <el-icon class="text-red-500 mr-2"><Star /></el-icon>
{{ route.query.title1 }} 权威发布
</h2>
<div class="space-y-4">
<div
v-for="(item, index) in list0"
:key="index"
class="group cursor-pointer"
@click="goToDetail(item)"
>
<div
v-if="item.images != null"
class="relative h-40 mb-2 overflow-hidden rounded-lg"
>
<img
:src="item.images"
:alt="item.contentTitle"
class="w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-300"
/>
</div>
<h3
class="text-base font-medium group-hover:text-blue-600 text-black line-clamp-1"
>
{{ item.contentTitle }}
</h3>
<p class="text-gray-600 text-sm line-clamp-2 mt-1">
{{ item.contentDescription }}
</p>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div>
</div>
</div>
<!-- 辟谣专区 -->
<div class="bg-white rounded-lg shadow-sm p-6">
<h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="text-red-500 mr-2"><Star /></el-icon>
辟谣专区
</h2> </h2>
<div class="space-y-4"> <div class="space-y-4">
<div <div
...@@ -58,32 +121,104 @@ ...@@ -58,32 +121,104 @@
/> />
</div> </div>
<h3 <h3
class="text-base font-medium group-hover:text-blue-600 text-black" class="text-base font-medium group-hover:text-blue-600 text-black line-clamp-1"
> >
{{ item.contentTitle }} {{ item.contentTitle }}
</h3> </h3>
<p class="text-sm text-gray-500">{{ item.contentDatetime }}</p> <p class="text-gray-600 text-sm line-clamp-2 mt-1">
{{ item.contentDescription }}
</p>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 通知公告 --> <div class="bg-white rounded-lg shadow-sm p-6">
<div class="bg-white rounded-lg shadow-sm p-6 text-black"> <h2 class="text-xl font-bold mb-4 flex items-center text-black">
<h2 class="text-xl font-bold mb-4 flex items-center"> <el-icon class="text-red-500 mr-2"><Bell /></el-icon>
<el-icon class="text-yellow-500 mr-2"><Bell /></el-icon> 专家解读
{{ route.query.title2 }}
</h2> </h2>
<div class="space-y-3"> <div class="space-y-4">
<div <div
v-for="(item, index) in list2" v-for="(item, index) in list2"
:key="index" :key="index"
class="flex items-center space-x-2 group cursor-pointer" class="group cursor-pointer"
@click="goToDetail(item)" @click="goToDetail(item)"
> >
<el-icon><Document /></el-icon> <h3
<span class="text-sm group-hover:text-blue-600">{{ class="text-base font-medium group-hover:text-blue-600 text-black line-clamp-1"
item.contentTitle >
}}</span> {{ item.contentTitle }}
</h3>
<p class="text-gray-600 text-sm line-clamp-2 mt-1">
{{ item.contentDescription }}
</p>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div>
</div>
</div>
<!-- 法律法规 -->
<div class="bg-white rounded-lg shadow-sm p-6">
<h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="text-red-500 mr-2"><Star /></el-icon>
法律法规
</h2>
<div class="space-y-4">
<div
v-for="(item, index) in list3"
:key="index"
class="group cursor-pointer"
@click="goToDetail(item)"
>
<div
v-if="item.images != null"
class="relative h-40 mb-2 overflow-hidden rounded-lg"
>
<img
:src="item.images"
:alt="item.contentTitle"
class="w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-300"
/>
</div>
<h3
class="text-base font-medium group-hover:text-blue-600 text-black line-clamp-1"
>
{{ item.contentTitle }}
</h3>
<p class="text-gray-600 text-sm line-clamp-2 mt-1">
{{ item.contentDescription }}
</p>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -108,34 +243,47 @@ import { ...@@ -108,34 +243,47 @@ import {
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { getHit } from "@/api/home/news/list"; import { getHit } from "@/api/home/news/list";
import { getNewsDetail } from "@/api/home/news/details"; import { getNewsDetail } from "@/api/home/news/details";
import { baseImageUrl } from "@/utils/config"; import { baseImageUrl, pyzq, qwfb, zjjd, flfg } from "@/utils/config";
import { getNewsList } from "@/api/home/news/list"; import { getNewsList } from "@/api/home/news/list";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue"; import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const details = ref({}); const details = ref({});
const list0 = ref([]);
const list1 = ref([]); const list1 = ref([]);
const list2 = ref([]); const list2 = ref([]);
const list3 = ref([]);
const breadcrumbItems = ref([ getList0(3, 1);
{ title: "首页", path: "/py/pyhome" },
{ title: route.query.title, path: route.query.pathType },
{ title: "详情", path: "" },
]);
const breadcrumbItems2 = ref([
{ title: "首页", path: "/py/pyhome" },
{ title: "详情", path: "" },
]);
getList1(3, 1); getList1(3, 1);
getList2(5, 1); getList2(3, 1);
getList3(3, 1);
//获取测边列表 0
function getList0(pageSize: number, pageNo: number) {
const datas = {
contentDisplay: "0",
contentType: qwfb,
pageSize: 3,
pageNo: 1,
};
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);
}
});
list0.value = rowsList;
});
}
function getList1(pageSize: number, pageNo: number) { function getList1(pageSize: number, pageNo: number) {
const datas = { const datas = {
contentDisplay: "0", contentDisplay: "0",
contentType: route.query.type1, contentType: pyzq,
pageSize: pageSize, pageSize: pageSize,
pageNo: pageNo, pageNo: pageNo,
}; };
...@@ -163,7 +311,7 @@ function goToDetail(item: any) { ...@@ -163,7 +311,7 @@ function goToDetail(item: any) {
function getList2(pageSize: number, pageNo: number) { function getList2(pageSize: number, pageNo: number) {
const datas = { const datas = {
contentDisplay: "0", contentDisplay: "0",
contentType: route.query.type2, contentType: zjjd,
pageSize: pageSize, pageSize: pageSize,
pageNo: pageNo, pageNo: pageNo,
}; };
...@@ -179,6 +327,26 @@ function getList2(pageSize: number, pageNo: number) { ...@@ -179,6 +327,26 @@ function getList2(pageSize: number, pageNo: number) {
}); });
} }
//获取通知公告
function getList3(pageSize: number, pageNo: number) {
const datas = {
contentDisplay: "0",
contentType: flfg,
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;
});
}
//统计点击数量 //统计点击数量
getHit(route.query.id); getHit(route.query.id);
......
src/views/py/home/PyHome.vue
...@@ -3,10 +3,10 @@ ...@@ -3,10 +3,10 @@
<div class="mx-auto bg-gray-200"> <div class="mx-auto bg-gray-200">
<main class="container mx-auto px-8 py-8"> <main class="container mx-auto px-8 py-8">
<div class="bg-white rounded-lg shadow-lg p-6 mb-8"> <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
<h2 class="text-2xl font-bold mb-4 text-black"> <h2 class="text-2xl font-bold mb-4 text-black line-clamp-1">
{{ title }} {{ title }}
</h2> </h2>
<p class="text-gray-600 mb-4"> <p class="text-gray-600 mb-4 line-clamp-1">
{{ description }} {{ description }}
</p> </p>
<div class="flex gap-8 mb-8"> <div class="flex gap-8 mb-8">
...@@ -78,21 +78,29 @@ ...@@ -78,21 +78,29 @@
</div> </div>
</template> </template>
<el-scrollbar height="400px"> <el-scrollbar height="400px">
<ul class="space-y-3"> <div class="space-y-4">
<li <div
v-for="(item, itemIndex) in section.items" v-for="(item, index) in section.items"
:key="itemIndex" :key="index"
class="flex items-center" class="group cursor-pointer flex items-center"
@click="getToDetail(item)"
> >
<span class="w-1 h-1 bg-gray-400 rounded-full mr-2"></span> <!-- <span class="bg-gray-400 mr-2 w-1 h-1"></span> -->
<el-link <!-- <div class="bg-gray-400 mr-2 w-1 h-1"></div> -->
:underline="false" <el-tooltip
class="text-gray-700 hover:text-primary truncate" popper-class="tooltip-width"
@click="getToDetail(item)" effect="dark"
>{{ item.contentTitle }}</el-link :content="item.contentTitle"
placement="top-start"
> >
</li> <div
</ul> class="text-sm group-hover:text-blue-600 line-clamp-1 text-gray-600 ml-2"
>
{{ item.contentTitle }}
</div>
</el-tooltip>
</div>
</div>
</el-scrollbar> </el-scrollbar>
</el-card> </el-card>
</div> </div>
...@@ -118,15 +126,24 @@ ...@@ -118,15 +126,24 @@
class="h-full hover:shadow-lg transition-shadow" class="h-full hover:shadow-lg transition-shadow"
@click="getToDetail(item)" @click="getToDetail(item)"
> >
<img :src="item.images" class="w-full h-full object-cover" /> <div class="w-full mb-4 overflow-hidden rounded-lg h-56">
<img
<!-- <el-image v-if="item.images"
:src="item.images" :src="item.images"
fit="cover" class="w-full h-full object-cover object-top"
class="w-full h-40 rounded mb-4" />
/> --> </div>
<h4 class="font-bold mb-2">{{ item.contentTitle }}</h4> <el-tooltip
<p class="text-sm text-gray-600"> popper-class="tooltip-width"
effect="dark"
:content="item.contentTitle"
placement="top-start"
>
<h4 class="font-bold mb-2 line-clamp-1">
{{ item.contentTitle }}
</h4>
</el-tooltip>
<p class="text-sm text-gray-600 line-clamp-1">
{{ item.contentDescription }} {{ item.contentDescription }}
</p> </p>
</el-card> </el-card>
...@@ -256,10 +273,10 @@ const quickLinks = [ ...@@ -256,10 +273,10 @@ const quickLinks = [
}, },
]; ];
getList(zjjd, 10, 1); getList(zjjd, 12, 1);
getList(pyzq, 10, 1); getList(pyzq, 12, 1);
getList(flfg, 10, 1); getList(flfg, 12, 1);
getList2(dtsy, 10, 1); getList2(dtsy, 12, 1);
getList3(5, 1); //轮播图 getList3(5, 1); //轮播图
//获取专家解读、辟谣专区、法律法规 //获取专家解读、辟谣专区、法律法规
...@@ -332,19 +349,19 @@ function getToDetail(item: any) { ...@@ -332,19 +349,19 @@ function getToDetail(item: any) {
router.push({ router.push({
path: "/py/news/detail", path: "/py/news/detail",
query: { query: {
pathType: "-1", type: "0",
type1: pyzq,
type2: zjjd,
title1: "辟谣专区",
title2: "专家解读",
id: item.id, id: item.id,
}, },
}); });
} }
} }
</script> </script>
<style scoped> <style>
.hero-bg { .tooltip-width {
max-width: 800px;
font-size: 14px;
}
　 .hero-bg {
background: linear-gradient(135deg, #001f3f, #0047ab); background: linear-gradient(135deg, #001f3f, #0047ab);
} }
:deep(.el-card) { :deep(.el-card) {
......
src/views/py/reading/Reading.vue
...@@ -15,14 +15,25 @@ ...@@ -15,14 +15,25 @@
> >
<div class="h-48 w-full mb-4 overflow-hidden rounded-lg"> <div class="h-48 w-full mb-4 overflow-hidden rounded-lg">
<img <img
v-if="card.images"
:src="card.images" :src="card.images"
class="w-full h-full object-cover object-top" class="w-full h-full object-cover object-top"
/> />
</div> </div>
<h3 class="text-lg font-semibold mb-2 text-black line-clamp-2"> <el-tooltip
{{ card.contentTitle }} popper-class="tooltip-width"
</h3> effect="dark"
<p class="text-gray-600 text-sm">{{ card.contentDescription }}</p> :content="card.contentTitle"
placement="top-start"
>
<h3 class="text-lg font-semibold mb-2 text-black line-clamp-1">
{{ card.contentTitle }}
</h3>
</el-tooltip>
<p class="text-gray-600 text-sm line-clamp-1">
{{ card.contentDescription }}
</p>
</div> </div>
</div> </div>
<!-- 分页器 --> <!-- 分页器 -->
...@@ -72,7 +83,7 @@ const handleCurrentChange = (val: number) => { ...@@ -72,7 +83,7 @@ const handleCurrentChange = (val: number) => {
getList(pageSize.value, pageNo.value); getList(pageSize.value, pageNo.value);
}; };
getList(10, 1); getList(12, 1);
//获取专家解读 //获取专家解读
function getList(pageSize: number, pageNo: number) { function getList(pageSize: number, pageNo: number) {
......
src/views/wm/home/WmHome.vue
<template> <template>
<!-- 主体内容区 --> <!-- 主体内容区 -->
<!-- 居中 --> <!-- 居中 -->
<div class="grid grid-cols-12 gap-6 w-[1440px] mx-auto"> <div class="grid grid-cols-12 gap-6 w-[1440px] mx-auto mb-10">
<!-- 左侧热点 --> <!-- 左侧热点 -->
<div class="col-span-6"> <div class="col-span-6">
<div class="flex items-center justify-between mb-4"> <div class="flex items-center justify-between mb-4">
......
src/views/wm/imessage/IMessage.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<template> <template>
<div> <div>
<!-- 主要内容区域 --> <!-- 主要内容区域 -->
<div class="container mx-auto px-0 py-0 w-[1440px]"> <div class="container mx-auto px-0 py-0 w-[1440px] mb-10">
<bread-crumb :breadcrumbItems="breadcrumbItems" /> <bread-crumb :breadcrumbItems="breadcrumbItems" />
<div class="grid grid-cols-12 gap-8 mt-5"> <div class="grid grid-cols-12 gap-8 mt-5">
......
src/views/wm/message/MessageDetail.vue
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 --> <!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template> <template>
<div class="mx-auto w-[1440px] px-4 py-0"> <div class="mx-auto w-[1440px] px-4 py-0 mb-10">
<bread-crumb <bread-crumb
:breadcrumbItems=" :breadcrumbItems="
route.query.pathType == '-1' ? breadcrumbItems2 : breadcrumbItems route.query.pathType == '-1' ? breadcrumbItems2 : breadcrumbItems
......
src/views/wm/message/MessageList.vue
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 --> <!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template> <template>
<div class="w-[1440px] mx-auto px-4"> <div class="w-[1440px] mx-auto px-4 mb-10">
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div class="flex items-center justify-between py-2 border-b mb-5"> <div class="flex items-center justify-between py-2 border-b mb-5">
<bread-crumb :breadcrumbItems="breadcrumbItems" /> <bread-crumb :breadcrumbItems="breadcrumbItems" />
......
src/views/wm/recover/RecoverDetail.vue
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 --> <!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template> <template>
<div class="mx-auto w-[1440px] px-4 py-0"> <div class="mx-auto w-[1440px] px-4 py-0 mb-10">
<bread-crumb <bread-crumb
:breadcrumbItems=" :breadcrumbItems="
route.query.pathType == '-1' ? breadcrumbItems2 : breadcrumbItems route.query.pathType == '-1' ? breadcrumbItems2 : breadcrumbItems
......
src/views/wm/recover/RecoverList.vue
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 --> <!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template> <template>
<div class="mx-auto w-[1440px] px-4"> <div class="mx-auto w-[1440px] px-4 mb-10">
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div class="flex items-center justify-between py-2 border-b mb-5"> <div class="flex items-center justify-between py-2 border-b mb-5">
<bread-crumb :breadcrumbItems="breadcrumbItems" /> <bread-crumb :breadcrumbItems="breadcrumbItems" />
......
vite.config.ts
...@@ -28,9 +28,9 @@ export default defineConfig({ ...@@ -28,9 +28,9 @@ export default defineConfig({
// 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy // 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy
proxy: { proxy: {
"/cms": { "/cms": {
// target: "http://localhost:9002", target: "http://localhost:9002",
// target: "http://172.16.70.52:8081", // target: "http://172.16.70.52:8081",
target: "http://192.168.19.142:9002", // target: "http://192.168.19.142:9002",
// target: "http://192.168.19.127:9002", // target: "http://192.168.19.127:9002",
changeOrigin: true, changeOrigin: true,
// rewrite: (path) => path.replace(/^\/cms/, "/cms"), // rewrite: (path) => path.replace(/^\/cms/, "/cms"),
......
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