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