Commit 5beeac2e by York

山西互联网联合辟谣平台 接口调试

parent 6c17a607
......@@ -8,6 +8,7 @@
"name": "emergency-project",
"version": "0.0.0",
"dependencies": {
"axios": "^1.7.9",
"element-plus": "^2.9.1",
"pinia": "^2.3.0",
"swiper": "^11.1.15",
......@@ -1767,6 +1768,11 @@
"resolved": "https://repo.huaweicloud.com/repository/npm/async-validator/-/async-validator-4.2.5.tgz",
"integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://repo.huaweicloud.com/repository/npm/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"node_modules/autoprefixer": {
"version": "10.4.20",
"resolved": "https://repo.huaweicloud.com/repository/npm/autoprefixer/-/autoprefixer-10.4.20.tgz",
......@@ -1804,6 +1810,16 @@
"postcss": "^8.1.0"
}
},
"node_modules/axios": {
"version": "1.7.9",
"resolved": "https://repo.huaweicloud.com/repository/npm/axios/-/axios-1.7.9.tgz",
"integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/balanced-match": {
"version": "1.0.2",
"resolved": "https://repo.huaweicloud.com/repository/npm/balanced-match/-/balanced-match-1.0.2.tgz",
......@@ -1982,6 +1998,17 @@
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://repo.huaweicloud.com/repository/npm/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/commander": {
"version": "4.1.1",
"resolved": "https://repo.huaweicloud.com/repository/npm/commander/-/commander-4.1.1.tgz",
......@@ -2132,6 +2159,14 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://repo.huaweicloud.com/repository/npm/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/didyoumean": {
"version": "1.2.2",
"resolved": "https://repo.huaweicloud.com/repository/npm/didyoumean/-/didyoumean-1.2.2.tgz",
......@@ -2356,6 +2391,25 @@
"node": ">=8"
}
},
"node_modules/follow-redirects": {
"version": "1.15.9",
"resolved": "https://repo.huaweicloud.com/repository/npm/follow-redirects/-/follow-redirects-1.15.9.tgz",
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/foreground-child": {
"version": "3.3.0",
"resolved": "https://repo.huaweicloud.com/repository/npm/foreground-child/-/foreground-child-3.3.0.tgz",
......@@ -2372,6 +2426,19 @@
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/form-data": {
"version": "4.0.1",
"resolved": "https://repo.huaweicloud.com/repository/npm/form-data/-/form-data-4.0.1.tgz",
"integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/fraction.js": {
"version": "4.3.7",
"resolved": "https://repo.huaweicloud.com/repository/npm/fraction.js/-/fraction.js-4.3.7.tgz",
......@@ -2897,6 +2964,25 @@
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://repo.huaweicloud.com/repository/npm/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime-types": {
"version": "2.1.35",
"resolved": "https://repo.huaweicloud.com/repository/npm/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dependencies": {
"mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/minimatch": {
"version": "9.0.5",
"resolved": "https://repo.huaweicloud.com/repository/npm/minimatch/-/minimatch-9.0.5.tgz",
......@@ -3402,6 +3488,11 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://repo.huaweicloud.com/repository/npm/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/queue-microtask": {
"version": "1.2.3",
"resolved": "https://repo.huaweicloud.com/repository/npm/queue-microtask/-/queue-microtask-1.2.3.tgz",
......
......@@ -10,7 +10,10 @@
"type-check": "vue-tsc --build"
},
"dependencies": {
"axios": "^1.7.9",
"element-plus": "^2.9.1",
"file-saver": "^2.0.5",
"nprogress": "^0.2.0",
"pinia": "^2.3.0",
"swiper": "^11.1.15",
"vue": "^3.5.13",
......
This diff is collapsed. Click to expand it.
import request from "@/utils/request";
// 轮播图
export function getBanner(query) {
return request({
url: "/exam/setup/list",
method: "get",
params: query,
});
}
// http://192.168.19.142:9002/cms/category/list?categoryFlag=tyshlwyjzhhjbzx
export function getTab(data) {
return request({
url: "/cms/category/list",
method: "post",
params: data,
});
}
// // 查询考试设置详细
// export function getSetup(id) {
// return request({
// url: "/exam/setup/" + id,
// method: "get",
// });
// }
// // 新增考试设置
// export function addSetup(data) {
// return request({
// url: "/exam/setup",
// method: "post",
// data: data,
// });
// }
import request from "@/utils/request";
// 新闻详情
// export function getNewsDetail(id) {
// return request({
// url: "/cms/content/get/?id=" + id,
// method: "get",
// });
// }
export function getNewsDetail(data) {
return request({
url: "/cms/content/get",
method: "get",
params: data,
});
}
import request from "@/utils/request";
// 新闻列表
export function getNewsList(data) {
return request({
url: "/cms/content/list",
method: "get",
params: data,
});
}
// 新闻点击数量
export function getHit(contentId) {
return request({
url: "/cms/content/" + contentId + "/hit",
method: "get",
});
}
<!-- 代码已包含 CSS:使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="min-h-screen bg-gray-50">
<div class="container mx-auto px-4 py-8 w-[1440px]">
<div class="flex gap-6">
<div class="flex-1">
<div class="bg-white rounded-lg shadow-sm">
<div
v-for="(news, index) in newsList"
:key="index"
class="group p-4 flex items-start border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer"
@click="getToDetail(news.id)"
>
<div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg">
<img :src="news.images" class="w-full h-full object-cover" />
</div>
<div class="flex-grow px-6">
<h2
class="text-lg font-semibold mb-2 group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ news.contentTitle }}
</h2>
<p class="text-gray-600 text-sm line-clamp-2">
{{ news.contentDescription }}
</p>
<div class="mt-3 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ news.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Document /></el-icon>
{{ news.contentTags }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ news.contentHit }}
</span>
</div>
</div>
<!-- <div class="w-24 flex-shrink-0 text-right">
<el-tag
:type="news.category.type"
size="small"
class="whitespace-nowrap"
>
{{ news.category.name }}
</el-tag>
</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="w-80 flex-shrink-0 space-y-6">
<!-- 辟谣专区 -->
<div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-red-500"><Star /></el-icon>
辟谣专区
</h2>
<div class="space-y-4">
<div
v-for="(item, index) in pyNews"
:key="index"
class="group cursor-pointer"
@click="getToDetail(item.id)"
>
<div
class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ item.contentTitle }}
</div>
<div class="text-xs text-gray-500 mt-1">
{{ item.contentHit }} 阅读
</div>
</div>
</div>
</div>
<!-- 专家解读-->
<div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-blue-500"><Location /></el-icon>
专家解读
</h2>
<div class="space-y-4">
<div
v-for="(item, index) in zjNews"
:key="index"
class="group cursor-pointer"
@click="getToDetail(item.id)"
>
<div class="h-32 mb-2 overflow-hidden rounded-lg">
<img :src="item.images" class="w-full h-full object-cover" />
</div>
<div
class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ item.contentTitle }}
</div>
</div>
</div>
</div>
<!-- 法律法规 -->
<div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-blue-500"><Location /></el-icon>
法律法规
</h2>
<div class="space-y-4">
<div
v-for="(item, index) in flNews"
:key="index"
class="group cursor-pointer"
@click="getToDetail(item.id)"
>
<div class="h-32 mb-2 overflow-hidden rounded-lg">
<img :src="item.images" class="w-full h-full object-cover" />
</div>
<div
class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ item.contentTitle }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import {
Clock,
Document,
View,
Star,
Location,
Bell,
ArrowRight,
} from "@element-plus/icons-vue";
import { getNewsList } from "@/api/home/news/list";
import { baseImageUrl, pyzq, qwfb, zjjd, flfg } from "@/utils/config";
import { useRouter, useRoute } from "vue-router";
import DetailRight from "@/components/news/DetailRight.vue";
const router = useRouter();
const route = useRoute();
const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);
const handleSizeChange = (val: number) => {
pageSize.value = val;
pageNo.value = pageNo.value;
};
const handleCurrentChange = (val: number) => {
pageSize.value = pageSize.value;
pageNo.value = val;
getList(pageSize.value, pageNo.value);
};
const newsList = ref([]);
const pyNews = ref([]);
const zjNews = ref([]);
const flNews = ref([]);
getList(10, 1);
//获取权威发布
function getList(pageSize: number, pageNo: number) {
const datas = {
contentType: qwfb,
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);
}
});
newsList.value = rowsList;
});
}
getPyList();
//获取辟谣专区
function getPyList() {
const datas = {
contentType: pyzq,
pageSize: 5,
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);
}
});
pyNews.value = rowsList;
});
}
getZjList();
//获取专家解读
function getZjList() {
const datas = {
contentType: zjjd,
pageSize: 2,
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);
}
});
zjNews.value = rowsList;
});
}
getFlList();
//获取法律法规
function getFlList() {
const datas = {
contentType: flfg,
pageSize: 2,
pageNo: 1,
};
getNewsList(datas).then((response) => {
flNews.value = response.data.rows;
});
}
function getToDetail(id: number) {
router.push({
path: "/py/news/detail",
query: {
type: 1,
id: id,
},
});
}
</script>
<style scoped>
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-1 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
<!-- 代码已包含 CSS:使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="min-h-screen bg-gray-50">
<div class="container mx-auto px-4 py-8 w-[1440px]">
<div
class="flex items-center text-sm text-gray-500 mb-5"
v-if="homeMoreType == '-1'"
>
<router-link to="/py/pyhome" class="text-gray-500 hover:text-blue-500"
>首页</router-link
>
<el-icon class="mx-2"><ArrowRight /></el-icon>
<span class="text-gray-900">{{ getTitleLink() }}</span>
</div>
<div class="flex gap-6">
<div class="flex-1">
<div class="bg-white rounded-lg shadow-sm">
<div
v-for="(item, index) in list"
:key="index"
class="group p-4 flex items-start border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer"
@click="getToDetail(item.id)"
>
<div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg">
<img :src="item.images" class="w-full h-full object-cover" />
</div>
<div class="flex-grow px-6">
<h2
class="text-lg font-semibold mb-2 group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ item.contentTitle }}
</h2>
<p class="text-gray-600 text-sm line-clamp-2">
{{ item.contentDescription }}
</p>
<div class="mt-3 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Document /></el-icon>
{{ item.contentTags }}
</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 class="w-24 flex-shrink-0 text-right">
<el-tag
:type="news.category.type"
size="small"
class="whitespace-nowrap"
>
{{ news.category.name }}
</el-tag>
</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="w-80 flex-shrink-0 space-y-6">
<!-- 辟谣专区 -->
<div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-red-500"><Star /></el-icon>
{{ title1 }}
</h2>
<div class="space-y-4">
<div
v-for="(item, index) in list1"
:key="index"
class="group cursor-pointer"
@click="getToDetail(item.id)"
>
<div
class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ item.contentTitle }}
</div>
<div class="text-xs text-gray-500 mt-1">
{{ item.contentHit }} 阅读
</div>
</div>
</div>
</div>
<!-- 专家解读-->
<div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-blue-500"><Location /></el-icon>
{{ title2 }}
</h2>
<div class="space-y-4">
<div
v-for="(item, index) in list2"
:key="index"
class="group cursor-pointer"
@click="getToDetail(item.id)"
>
<div class="h-32 mb-2 overflow-hidden rounded-lg">
<img :src="item.images" class="w-full h-full object-cover" />
</div>
<div
class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ item.contentTitle }}
</div>
</div>
</div>
</div>
<!-- 法律法规 -->
<div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-blue-500"><Location /></el-icon>
{{ title3 }}
</h2>
<div class="space-y-4">
<div
v-for="(item, index) in list3"
:key="index"
class="group cursor-pointer"
@click="getToDetail(item.id)"
>
<div class="h-32 mb-2 overflow-hidden rounded-lg">
<img :src="item.images" class="w-full h-full object-cover" />
</div>
<div
class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ item.contentTitle }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import {
Clock,
Document,
View,
Star,
Location,
Bell,
ArrowRight,
} from "@element-plus/icons-vue";
import { getNewsList } from "@/api/home/news/list";
import { baseImageUrl, pyzq, qwfb, zjjd, flfg } from "@/utils/config";
import { useRouter, useRoute } from "vue-router";
import { ca } from "element-plus/es/locales.mjs";
const router = useRouter();
const route = useRoute();
const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);
const handleSizeChange = (val: number) => {
pageSize.value = val;
pageNo.value = pageNo.value;
};
const handleCurrentChange = (val: number) => {
pageSize.value = pageSize.value;
pageNo.value = val;
getList(pageSize.value, pageNo.value);
};
const list = ref([]);
const list1 = ref([]);
const list2 = ref([]);
const list3 = ref([]);
const props = defineProps({
typePage: String,
type0: String,
type1: String,
type2: String,
type3: String,
title1: String,
title2: String,
title3: String,
homeMoreType: String,
});
function getTitleLink() {
switch (props.typePage) {
case "3": {
return "专家解读";
}
case "2": {
return "辟谣专区";
}
case "4": {
return "法律法规";
}
}
}
getList(10, 1);
getList1();
getList2();
getList3();
//获取主列表
function getList(pageSize: number, pageNo: number) {
const datas = {
contentType: props.type0,
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);
}
});
list.value = rowsList;
});
}
//获取测边列表 1
function getList1() {
const datas = {
contentType: props.type1,
pageSize: 5,
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);
}
});
list1.value = rowsList;
});
}
//获取测边列表 2
function getList2() {
const datas = {
contentType: props.type2,
pageSize: 2,
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);
}
});
list2.value = rowsList;
});
}
//获取测边列表 3
function getList3() {
const datas = {
contentType: props.type3,
pageSize: 2,
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);
}
});
list3.value = rowsList;
});
}
function getToDetail(id: number) {
router.push({
path: "/py/news/detail",
query: {
type: props.typePage,
type1: props.type1,
type2: props.type2,
title1: props.title1,
title2: props.title2,
id: id,
},
});
}
</script>
<style scoped>
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-1 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
......@@ -32,9 +32,9 @@
:key="index"
class="flex items-center cursor-pointer hover:bg-blue-700 px-4"
:class="{ 'bg-blue-700': activeNav === index }"
@click="navigateTo(index)"
@click="navigateTo(index, item)"
>
<span class="text-white">{{ item }}</span>
<span class="text-white">{{ item.categoryTitle }}</span>
</li>
</ul>
</div>
......@@ -84,22 +84,38 @@ import {
Search,
Document,
} from "@element-plus/icons-vue";
import { getTab } from "@/api/home/home";
import { HLW_YJZH_JBZX } from "@/utils/config";
const router = useRouter();
const swiperModules = [Pagination, Autoplay];
const searchQuery = ref("");
const activeNav = ref(0);
const navItems = ["首页", "新闻热点", "太原新闻", "山西新闻", "通知公告"];
// const navItems = ["首页", "新闻热点", "太原新闻", "山西新闻", "通知公告"];
const navItems = ref([]);
const data = {
categoryFlag: HLW_YJZH_JBZX,
};
getTab(data).then((res) => {
console.log(res);
const data = res.data.rows;
// //用data内的categorySort排序
data.sort((a, b) => a.categorySort - b.categorySort);
//将data内categoryTitle等于“权威发布”和“辟谣专区”和“轮播图”的数据过滤不在navItems.value中显示
const filterData = data.filter((item) => item.categoryTitle !== "轮播图");
navItems.value = filterData;
});
function navigateTo(index) {
function navigateTo(index, item) {
const routes = [
{ path: "/home/home" },
{ path: "/home/news" },
{ path: "/home/tynews" },
{ path: "/home/sxnews" },
{ path: "/home/announcements" },
{ 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(routes[index].path).catch((err) => {});
router.push({ path: routes[index].path });
activeNav.value = index;
}
......
import useUserStore from '@/store/modules/user'
function authPermission(permission) {
const all_permission = "*:*:*";
const permissions = useUserStore().permissions
if (permission && permission.length > 0) {
return permissions.some(v => {
return all_permission === v || v === permission
})
} else {
return false
}
}
function authRole(role) {
const super_admin = "admin";
const roles = useUserStore().roles
if (role && role.length > 0) {
return roles.some(v => {
return super_admin === v || v === role
})
} else {
return false
}
}
export default {
// 验证用户是否具备某权限
hasPermi(permission) {
return authPermission(permission);
},
// 验证用户是否含有指定权限,只需包含其中一个
hasPermiOr(permissions) {
return permissions.some(item => {
return authPermission(item)
})
},
// 验证用户是否含有指定权限,必须全部拥有
hasPermiAnd(permissions) {
return permissions.every(item => {
return authPermission(item)
})
},
// 验证用户是否具备某角色
hasRole(role) {
return authRole(role);
},
// 验证用户是否含有指定角色,只需包含其中一个
hasRoleOr(roles) {
return roles.some(item => {
return authRole(item)
})
},
// 验证用户是否含有指定角色,必须全部拥有
hasRoleAnd(roles) {
return roles.every(item => {
return authRole(item)
})
}
}
const sessionCache = {
set (key, value) {
if (!sessionStorage) {
return
}
if (key != null && value != null) {
sessionStorage.setItem(key, value)
}
},
get (key) {
if (!sessionStorage) {
return null
}
if (key == null) {
return null
}
return sessionStorage.getItem(key)
},
setJSON (key, jsonValue) {
if (jsonValue != null) {
this.set(key, JSON.stringify(jsonValue))
}
},
getJSON (key) {
const value = this.get(key)
if (value != null) {
return JSON.parse(value)
}
},
remove (key) {
sessionStorage.removeItem(key);
}
}
const localCache = {
set (key, value) {
if (!localStorage) {
return
}
if (key != null && value != null) {
localStorage.setItem(key, value)
}
},
get (key) {
if (!localStorage) {
return null
}
if (key == null) {
return null
}
return localStorage.getItem(key)
},
setJSON (key, jsonValue) {
if (jsonValue != null) {
this.set(key, JSON.stringify(jsonValue))
}
},
getJSON (key) {
const value = this.get(key)
if (value != null) {
return JSON.parse(value)
}
},
remove (key) {
localStorage.removeItem(key);
}
}
export default {
/**
* 会话级缓存
*/
session: sessionCache,
/**
* 本地缓存
*/
local: localCache
}
import axios from 'axios'
import { ElLoading, ElMessage } from 'element-plus'
import { saveAs } from 'file-saver'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import { blobValidate } from '@/utils/ruoyi'
const baseURL = import.meta.env.VITE_APP_BASE_API
let downloadLoadingInstance;
export default {
name(name, isDelete = true) {
var url = baseURL + "/common/download?fileName=" + encodeURIComponent(name) + "&delete=" + isDelete
axios({
method: 'get',
url: url,
responseType: 'blob',
headers: { 'Authorization': 'Bearer ' + getToken() }
}).then((res) => {
const isBlob = blobValidate(res.data);
if (isBlob) {
const blob = new Blob([res.data])
this.saveAs(blob, decodeURIComponent(res.headers['download-filename']))
} else {
this.printErrMsg(res.data);
}
})
},
resource(resource) {
var url = baseURL + "/common/download/resource?resource=" + encodeURIComponent(resource);
axios({
method: 'get',
url: url,
responseType: 'blob',
headers: { 'Authorization': 'Bearer ' + getToken() }
}).then((res) => {
const isBlob = blobValidate(res.data);
if (isBlob) {
const blob = new Blob([res.data])
this.saveAs(blob, decodeURIComponent(res.headers['download-filename']))
} else {
this.printErrMsg(res.data);
}
})
},
zip(url, name) {
var url = baseURL + url
downloadLoadingInstance = ElLoading.service({ text: "正在下载数据,请稍候", background: "rgba(0, 0, 0, 0.7)", })
axios({
method: 'get',
url: url,
responseType: 'blob',
headers: { 'Authorization': 'Bearer ' + getToken() }
}).then((res) => {
const isBlob = blobValidate(res.data);
if (isBlob) {
const blob = new Blob([res.data], { type: 'application/zip' })
this.saveAs(blob, name)
} else {
this.printErrMsg(res.data);
}
downloadLoadingInstance.close();
}).catch((r) => {
console.error(r)
ElMessage.error('下载文件出现错误,请联系管理员!')
downloadLoadingInstance.close();
})
},
saveAs(text, name, opts) {
saveAs(text, name, opts);
},
async printErrMsg(data) {
const resText = await data.text();
const rspObj = JSON.parse(resText);
const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
ElMessage.error(errMsg);
}
}
import tab from './tab'
import auth from './auth'
import cache from './cache'
import modal from './modal'
import download from './download'
export default function installPlugins(app){
// 页签操作
app.config.globalProperties.$tab = tab
// 认证对象
app.config.globalProperties.$auth = auth
// 缓存对象
app.config.globalProperties.$cache = cache
// 模态框对象
app.config.globalProperties.$modal = modal
// 下载文件
app.config.globalProperties.$download = download
}
import { ElMessage, ElMessageBox, ElNotification, ElLoading } from 'element-plus'
let loadingInstance;
export default {
// 消息提示
msg(content) {
ElMessage.info(content)
},
// 错误消息
msgError(content) {
ElMessage.error(content)
},
// 成功消息
msgSuccess(content) {
ElMessage.success(content)
},
// 警告消息
msgWarning(content) {
ElMessage.warning(content)
},
// 弹出提示
alert(content) {
ElMessageBox.alert(content, "系统提示")
},
// 错误提示
alertError(content) {
ElMessageBox.alert(content, "系统提示", { type: 'error' })
},
// 成功提示
alertSuccess(content) {
ElMessageBox.alert(content, "系统提示", { type: 'success' })
},
// 警告提示
alertWarning(content) {
ElMessageBox.alert(content, "系统提示", { type: 'warning' })
},
// 通知提示
notify(content) {
ElNotification.info(content)
},
// 错误通知
notifyError(content) {
ElNotification.error(content);
},
// 成功通知
notifySuccess(content) {
ElNotification.success(content)
},
// 警告通知
notifyWarning(content) {
ElNotification.warning(content)
},
// 确认窗体
confirm(content) {
return ElMessageBox.confirm(content, "系统提示", {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: "warning",
})
},
// 提交内容
prompt(content) {
return ElMessageBox.prompt(content, "系统提示", {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: "warning",
})
},
// 打开遮罩层
loading(content) {
loadingInstance = ElLoading.service({
lock: true,
text: content,
background: "rgba(0, 0, 0, 0.7)",
})
},
// 关闭遮罩层
closeLoading() {
loadingInstance.close();
}
}
import useTagsViewStore from '@/store/modules/tagsView'
import router from '@/router'
export default {
// 刷新当前tab页签
refreshPage(obj) {
const { path, query, matched } = router.currentRoute.value;
if (obj === undefined) {
matched.forEach((m) => {
if (m.components && m.components.default && m.components.default.name) {
if (!['Layout', 'ParentView'].includes(m.components.default.name)) {
obj = { name: m.components.default.name, path: path, query: query };
}
}
});
}
return useTagsViewStore().delCachedView(obj).then(() => {
const { path, query } = obj
router.replace({
path: '/redirect' + path,
query: query
})
})
},
// 关闭当前tab页签,打开新页签
closeOpenPage(obj) {
useTagsViewStore().delView(router.currentRoute.value);
if (obj !== undefined) {
return router.push(obj);
}
},
// 关闭指定tab页签
closePage(obj) {
if (obj === undefined) {
return useTagsViewStore().delView(router.currentRoute.value).then(({ visitedViews }) => {
const latestView = visitedViews.slice(-1)[0]
if (latestView) {
return router.push(latestView.fullPath)
}
return router.push('/');
});
}
return useTagsViewStore().delView(obj);
},
// 关闭所有tab页签
closeAllPage() {
return useTagsViewStore().delAllViews();
},
// 关闭左侧tab页签
closeLeftPage(obj) {
return useTagsViewStore().delLeftTags(obj || router.currentRoute.value);
},
// 关闭右侧tab页签
closeRightPage(obj) {
return useTagsViewStore().delRightTags(obj || router.currentRoute.value);
},
// 关闭其他tab页签
closeOtherPage(obj) {
return useTagsViewStore().delOthersViews(obj || router.currentRoute.value);
},
// 打开tab页签
openPage(url) {
return router.push(url);
},
// 修改tab页签
updatePage(obj) {
return useTagsViewStore().updateVisitedView(obj);
}
}
......@@ -8,7 +8,7 @@ import TaiyuanNews from "../views/home/tynews/TaiyuanNews.vue";
import ShanxiNews from "../views/home/sxnews/ShanxiNews.vue";
import Announcements from "../views/home/announcements/Announcements.vue";
import Jb from "../views/home/jb/Jb.vue";
import NewsDetail from "../views/home/hotnews/NewsDetail.vue";
import NewsDetail from "../views/home/detail/NewsDetail.vue";
//辟谣
import PyLayout from "../layout/py.vue";
......@@ -18,6 +18,7 @@ import Rumor from "../views/py/rumor/Rumor.vue";
import Expert from "../views/py/expert/Expert.vue";
import Law from "../views/py/law/Law.vue";
import Reading from "../views/py/reading/Reading.vue";
import PyNewsDetail from "../views/py/detail/NewsDetail.vue";
//网名有话说
import WmLayout from "../layout/wm.vue";
......@@ -69,7 +70,7 @@ const router = createRouter({
},
{
name: "NewsDetail",
path: "/home/newsdetail",
path: "/home/news/detail",
component: NewsDetail,
},
],
......@@ -109,6 +110,11 @@ const router = createRouter({
path: "/py/reading",
component: Reading,
},
{
name: "PyNewsDetail",
path: "/py/news/detail",
component: PyNewsDetail,
},
],
},
......
let baseImageUrl;
if (process.env.NODE_ENV === "development") {
// baseImageUrl = (path) => `${window.location.origin}${path}`;
baseImageUrl = (path) => "http://192.168.19.142:9002" + path;
// console.log(baseImageUrl);
} else {
baseImageUrl = (path) => path;
}
export { baseImageUrl };
// 栏目属性
export const HLW_YJZH_JBZX = "tyshlwyjzhhjbzx"; //太原市互联网应急指挥和举报中心
export const HLW_LH_PYPT = "sxhlwlhpypt"; //山西互联网联合辟谣平台
export const WM_YHS = "wmyhs"; //网民有话说
export const XW_RD_ID = "1666653706550321158"; //新闻热点
export const TY_XW_ID = "1876175326853881857"; //太原新闻
export const SX_XW_ID = "1876175475609067521"; //山西新闻
export const TZ_GG_ID = "1876175589341814786"; //通知公告
export const QW_FB_ID = "1876540452316536834"; //权威发布
export const PY_ZQ_ID = "1876540606213939201"; //辟谣专区
export const LBT_ID = "1876561611942682626"; //轮播图
//文章类型
export const lbt = "lbt"; // 轮播图
export const rdxw = "rdxw"; // 热点新闻
export const tyxw = "tyxw"; // 太原新闻
export const sxxw = "sxxw"; // 山西新闻
export const tzgg = "tzgg"; // 通知公告
export const qwfb = "qwfb"; // 权威发布
export const pyzq = "pyzq"; // 辟谣专区
export const zjjd = "zjjd"; // 专家解读
export const flfg = "flfg"; // 法律法规
export const dtsy = "dtsy"; // 读图识谣
export default {
401: "认证失败,无法访问系统资源",
403: "当前操作没有权限",
404: "访问资源不存在",
default: "系统未知错误,请反馈给管理员",
};
import axios from "axios";
import {
ElNotification,
ElMessageBox,
ElMessage,
ElLoading,
} from "element-plus";
// import { getToken } from '@/utils/auth'
import errorCode from "@/utils/errorCode";
import { tansParams, blobValidate } from "@/utils/ruoyi";
import cache from "@/plugins/cache";
import { saveAs } from "file-saver";
// import useUserStore from "@/store/modules/user";
// import { useRouter } from "vue-router";
let downloadLoadingInstance;
// const router = useRouter();
// 是否显示重新登录
// export let isRelogin = { show: false };
axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项,表示请求URL公共部分
baseURL: import.meta.env.VITE_APP_BASE_API,
// 超时
timeout: 10000,
});
// request拦截器
service.interceptors.request.use(
(config) => {
// 是否需要设置 token
// const isToken = (config.headers || {}).isToken === false
// 是否需要防止数据重复提交
const isRepeatSubmit = (config.headers || {}).repeatSubmit === false;
// if (getToken() && !isToken) {
// config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
// }
// get请求映射params参数
if (config.method === "get" && config.params) {
let url = config.url + "?" + tansParams(config.params);
url = url.slice(0, -1);
config.params = {};
config.url = url;
}
if (
!isRepeatSubmit &&
(config.method === "post" || config.method === "put")
) {
const requestObj = {
url: config.url,
data:
typeof config.data === "object"
? JSON.stringify(config.data)
: config.data,
time: new Date().getTime(),
};
const requestSize = Object.keys(JSON.stringify(requestObj)).length; // 请求数据大小
const limitSize = 5 * 1024 * 1024; // 限制存放数据5M
if (requestSize >= limitSize) {
console.warn(
`[${config.url}]: ` +
"请求数据大小超出允许的5M限制,无法进行防重复提交验证。"
);
return config;
}
const sessionObj = cache.session.getJSON("sessionObj");
if (
sessionObj === undefined ||
sessionObj === null ||
sessionObj === ""
) {
cache.session.setJSON("sessionObj", requestObj);
} else {
const s_url = sessionObj.url; // 请求地址
const s_data = sessionObj.data; // 请求数据
const s_time = sessionObj.time; // 请求时间
const interval = 1000; // 间隔时间(ms),小于此时间视为重复提交
if (
s_data === requestObj.data &&
requestObj.time - s_time < interval &&
s_url === requestObj.url
) {
const message = "数据正在处理,请勿重复提交";
console.warn(`[${s_url}]: ` + message);
return Promise.reject(new Error(message));
} else {
cache.session.setJSON("sessionObj", requestObj);
}
}
}
return config;
},
(error) => {
console.log(error);
Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
(res) => {
// 未设置状态码则默认成功状态
const code = res.data.code || 200;
// 获取错误信息
const msg = errorCode[code] || res.data.msg || errorCode["default"];
// 二进制数据则直接返回
if (
res.request.responseType === "blob" ||
res.request.responseType === "arraybuffer"
) {
return res.data;
}
if (code === 401) {
// if (!isRelogin.show) {
// isRelogin.show = true;
// ElMessageBox.confirm(
// "登录状态已过期,您可以继续留在该页面,或者重新登录",
// "系统提示",
// {
// confirmButtonText: "重新登录",
// cancelButtonText: "取消",
// type: "warning",
// }
// )
// .then(() => {
// isRelogin.show = false;
// useUserStore()
// .logOut()
// .then(() => {
// router.push("/login");
// });
// })
// .catch(() => {
// isRelogin.show = false;
// });
// }
// return Promise.reject("无效的会话,或者会话已过期,请重新登录。");
return Promise.reject("链接失败");
} else if (code === 500) {
ElMessage({ message: msg, type: "error" });
return Promise.reject(new Error(msg));
} else if (code === 601) {
ElMessage({ message: msg, type: "warning" });
return Promise.reject(new Error(msg));
} else if (code !== 200) {
ElNotification.error({ title: msg });
return Promise.reject("error");
} else {
return Promise.resolve(res.data);
}
},
(error) => {
console.log("err" + error);
let { message } = error;
if (message == "Network Error") {
message = "后端接口连接异常";
} else if (message.includes("timeout")) {
message = "系统接口请求超时";
} else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
ElMessage({ message: message, type: "error", duration: 5 * 1000 });
return Promise.reject(error);
}
);
// 通用下载方法
export function download(url, params, filename, config) {
downloadLoadingInstance = ElLoading.service({
text: "正在下载数据,请稍候",
background: "rgba(0, 0, 0, 0.7)",
});
return service
.post(url, params, {
transformRequest: [
(params) => {
return tansParams(params);
},
],
headers: { "Content-Type": "application/x-www-form-urlencoded" },
responseType: "blob",
...config,
})
.then(async (data) => {
const isBlob = blobValidate(data);
if (isBlob) {
const blob = new Blob([data]);
saveAs(blob, filename);
} else {
const resText = await data.text();
const rspObj = JSON.parse(resText);
const errMsg =
errorCode[rspObj.code] || rspObj.msg || errorCode["default"];
ElMessage.error(errMsg);
}
downloadLoadingInstance.close();
})
.catch((r) => {
console.error(r);
ElMessage.error("下载文件出现错误,请联系管理员!");
downloadLoadingInstance.close();
});
}
export default service;
/**
* 通用js方法封装处理
* Copyright (c) 2019 ruoyi
*/
// 日期格式化
export function parseTime(time, pattern) {
if (arguments.length === 0 || !time) {
return null
}
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 === 'number') && (time.toString().length === 10)) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
if (result.length > 0 && value < 10) {
value = '0' + value
}
return value || 0
})
return time_str
}
// 表单重置
export function resetForm(refName) {
if (this.$refs[refName]) {
this.$refs[refName].resetFields();
}
}
// 添加日期范围
export function addDateRange(params, dateRange, propName) {
let 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];
} else {
search.params['begin' + propName] = dateRange[0];
search.params['end' + propName] = dateRange[1];
}
return search;
}
// 回显数据字典
export function selectDictLabel(datas, value) {
if (value === undefined) {
return "";
}
var actions = [];
Object.keys(datas).some((key) => {
if (datas[key].value == ('' + value)) {
actions.push(datas[key].label);
return true;
}
})
if (actions.length === 0) {
actions.push(value);
}
return actions.join('');
}
// 回显数据字典(字符串数组)
export function selectDictLabels(datas, value, separator) {
if (value === undefined || value.length ===0) {
return "";
}
if (Array.isArray(value)) {
value = value.join(",");
}
var actions = [];
var currentSeparator = undefined === separator ? "," : separator;
var temp = value.split(currentSeparator);
Object.keys(value.split(currentSeparator)).some((val) => {
var match = false;
Object.keys(datas).some((key) => {
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);
}
// 字符串格式化(%s )
export function sprintf(str) {
var args = arguments, flag = true, i = 1;
str = str.replace(/%s/g, function () {
var arg = args[i++];
if (typeof arg === 'undefined') {
flag = false;
return '';
}
return arg;
});
return flag ? str : '';
}
// 转换字符串,undefined,null等转化为""
export function parseStrEmpty(str) {
if (!str || str == "undefined" || str == "null") {
return "";
}
return str;
}
// 数据合并
export function mergeRecursive(source, target) {
for (var p in target) {
try {
if (target[p].constructor == Object) {
source[p] = mergeRecursive(source[p], target[p]);
} else {
source[p] = target[p];
}
} catch (e) {
source[p] = target[p];
}
}
return source;
};
/**
* 构造树型结构数据
* @param {*} data 数据源
* @param {*} id id字段 默认 'id'
* @param {*} parentId 父节点字段 默认 'parentId'
* @param {*} children 孩子节点字段 默认 'children'
*/
export function handleTree(data, id, parentId, children) {
let config = {
id: id || 'id',
parentId: parentId || 'parentId',
childrenList: children || 'children'
};
var childrenListMap = {};
var nodeIds = {};
var tree = [];
for (let d of data) {
let parentId = d[config.parentId];
if (childrenListMap[parentId] == null) {
childrenListMap[parentId] = [];
}
nodeIds[d[config.id]] = d;
childrenListMap[parentId].push(d);
}
for (let d of data) {
let parentId = d[config.parentId];
if (nodeIds[parentId] == null) {
tree.push(d);
}
}
for (let t of tree) {
adaptToChildrenList(t);
}
function adaptToChildrenList(o) {
if (childrenListMap[o[config.id]] !== null) {
o[config.childrenList] = childrenListMap[o[config.id]];
}
if (o[config.childrenList]) {
for (let c of o[config.childrenList]) {
adaptToChildrenList(c);
}
}
}
return tree;
}
/**
* 参数处理
* @param {*} params 参数
*/
export function tansParams(params) {
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') {
for (const key of Object.keys(value)) {
if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') {
let params = propName + '[' + key + ']';
var subPart = encodeURIComponent(params) + "=";
result += subPart + encodeURIComponent(value[key]) + "&";
}
}
} else {
result += part + encodeURIComponent(value) + "&";
}
}
}
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)
}
return res;
}
// 验证是否为blob格式
export function blobValidate(data) {
return data.type !== 'application/json'
}
<!-- 代码已包含 CSS:使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="min-h-screen bg-gray-50 py-5 px-0">
<div class="w-[1440px] mx-auto">
<!-- 列表区域 -->
<div class="bg-white rounded-lg shadow-sm">
<div class="divide-y divide-gray-200">
<div
v-for="item in tableData"
:key="item.id"
class="p-4 hover:bg-gray-50 transition-colors"
>
<div class="flex items-center justify-between">
<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"
@click="handleTitleClick(item)"
>
{{ item.contentTitle }}
</h3>
</div>
<div class="flex items-center text-sm text-gray-500">
<span class="mr-4">发布人:{{ item.contentAuthor }}</span>
<span class="mr-4">发布时间:{{ 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 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>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { Search, Refresh, View } from "@element-plus/icons-vue";
import { getNewsList } from "@/api/home/news/list";
import { useRouter, useRoute } from "vue-router";
import { baseImageUrl, rdxw, sxxw, tzgg } from "@/utils/config";
const router = useRouter();
const route = useRoute();
const searchKeyword = ref("");
const dateRange = ref([]);
const noticeType = ref("");
const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(100);
const tableData = ref([]);
const handleSizeChange = (val: number) => {
pageSize.value = val;
pageNo.value = pageNo.value;
};
const handleCurrentChange = (val: number) => {
pageSize.value = pageSize.value;
pageNo.value = val;
getList(pageSize.value, pageNo.value);
};
const handleTitleClick = (row: any) => {
router.push({
// path: "/home/announcements/detail",
path: "/home/news/detail",
query: {
type: "4",
id: row.id,
tabId: route.query.id,
},
});
};
getList(pageSize.value, pageNo.value);
//获取新闻热点列表
function getList(pageSize: number, pageNo: number) {
const datas = {
contentType: tzgg,
pageSize: pageSize,
pageNo: pageNo,
};
getNewsList(datas).then((response) => {
const data = response.data;
const rowsList = data.rows;
total.value = data.total;
tableData.value = rowsList;
});
}
</script>
<style scoped>
.el-input :deep(.el-input__wrapper) {
box-shadow: 0 0 0 1px #e5e7eb inset;
}
.el-input :deep(.el-input__wrapper.is-focus) {
box-shadow: 0 0 0 1px #409eff inset;
}
.el-select :deep(.el-input__wrapper) {
box-shadow: 0 0 0 1px #e5e7eb inset;
}
.el-select :deep(.el-input__wrapper.is-focus) {
box-shadow: 0 0 0 1px #409eff inset;
}
.el-date-editor :deep(.el-range-separator) {
color: #606266;
}
</style>
<template>
<div class="min-h-screen bg-gray-50">
<div class="w-[1440px] mx-auto px-0 py-5">
<div class="flex items-center text-sm text-gray-500 mb-2">
<router-link
:to="toRoute()"
class="text-gray-500 hover:text-blue-500"
>{{ toRouteName() }}</router-link
>
<el-icon class="mx-2"><ArrowRight /></el-icon>
<span class="text-gray-900">新闻详情</span>
</div>
<!-- 主要内容区 -->
<div class="grid grid-cols-3 gap-8">
<!-- 左侧主要新闻内容 -->
<div class="col-span-2 bg-white rounded-lg shadow-sm p-6">
<h1 class="text-3xl font-bold mb-4 text-black">
{{ details.title }}
</h1>
<div class="flex items-center text-gray-600 mb-6 space-x-4">
<div class="flex items-center">
<el-icon><User /></el-icon>
<span class="ml-1">{{ details.author }}</span>
</div>
<div class="flex items-center">
<el-icon><Clock /></el-icon>
<span class="ml-1">{{ details.date }}</span>
</div>
<div class="flex items-center">
<el-icon><View /></el-icon>
<span class="ml-1">阅读 {{ details.hit }}</span>
</div>
</div>
<div v-html="details.content"></div>
</div>
<!-- 右侧边栏 -->
<div class="space-y-6">
<!-- 热点新闻 -->
<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 hotNews"
:key="index"
class="group cursor-pointer"
@click="itemTyClick(item.id)"
>
<div 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"
>
{{ item.contentTitle }}
</h3>
<p class="text-sm text-gray-500">{{ item.contentDatetime }}</p>
</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>
通知公告
</h2>
<div class="space-y-3">
<div
v-for="(item, index) in announcements"
:key="index"
class="flex items-center space-x-2 group cursor-pointer"
@click="itemTyClick(item.id)"
>
<el-icon><Document /></el-icon>
<span class="text-sm group-hover:text-blue-600">{{
item.contentTitle
}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";
import {
User,
Clock,
View,
Star,
Location,
Bell,
Document,
ArrowRight,
} from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
import { getHit } from "@/api/home/news/list";
import { getNewsDetail } from "@/api/home/news/details";
import {
baseImageUrl,
XW_RD_ID,
TY_XW_ID,
SX_XW_ID,
TZ_GG_ID,
} from "@/utils/config";
import { getNewsList } from "@/api/home/news/list";
const route = useRoute();
const router = useRouter();
function toRouteName() {
switch (route.query.type) {
case "0":
return "首页";
case "1":
return "新闻热点";
case "2":
return "太原新闻";
case "3":
return "山西新闻";
case "4":
return "通知公告";
}
}
function toRoute() {
switch (route.query.type) {
case "0":
return "/home/home";
case "1":
return "/home/news";
case "2":
return "/home/tynews";
case "3":
return "/home/sxnews";
case "4":
return "/home/announcements";
}
}
const hotNews = ref([]);
const announcements = ref([]);
getHotsNewsList(3, 1);
//获取太原新闻
function getHotsNewsList(pageSize: number, pageNo: number) {
const datas = {
categoryId: XW_RD_ID,
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;
});
}
function itemTyClick(id: number) {
router.push({
path: "/home/news/detail",
query: {
type: toType(),
id: id,
tabId: route.query.tabId,
},
});
}
function toType() {
switch (route.query.type) {
case "0":
return "0";
case "1":
return "1";
case "2":
return "2";
case "3":
return "3";
case "4":
return "4";
}
}
getTzGgNewsList(5, 1);
//获取通知公告
function getTzGgNewsList(pageSize: number, pageNo: number) {
const datas = {
categoryId: TZ_GG_ID,
pageSize: pageSize,
pageNo: pageNo,
};
getNewsList(datas).then((response) => {
const data = response.data;
const rowsList = data.rows;
rowsList.forEach((item: any) => {
if (item.contentImg) {
item.images = baseImageUrl(JSON.parse(item.contentImg)[0].path);
}
});
announcements.value = rowsList;
});
}
const details = ref({});
//统计点击数量
getHit(route.query.id);
const data = {
id: route.query.id,
};
// 监听数据变化
watch(
() => route.query.id,
(newVal, oldVal) => {
if (newVal) {
data.id = newVal;
getNewsDetail(data).then((res) => {
details.value = res.data;
console.log(details.value);
});
}
}
);
getNewsDetail(data).then((res) => {
details.value = res.data;
console.log(details.value);
});
function itemClicks(id: number) {
router.push({
path: "/home/news/detail",
query: {
id: id,
tabId: route.query.tabId,
},
});
}
</script>
<style scoped>
.prose img {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.prose p {
margin-bottom: 1.5rem;
line-height: 1.75;
}
</style>
<template>
<div class="min-h-screen bg-gray-50">
<div class="w-[1440px] mx-auto px-0 py-5">
<div class="flex items-center text-sm text-gray-500 mb-2">
<router-link to="/home/news" class="text-gray-500 hover:text-blue-500"
>新闻热点</router-link
>
<el-icon class="mx-2"><ArrowRight /></el-icon>
<span class="text-gray-900">新闻详情</span>
</div>
<!-- 主要内容区 -->
<div class="grid grid-cols-3 gap-8">
<!-- 左侧主要新闻内容 -->
<div class="col-span-2 bg-white rounded-lg shadow-sm p-6">
<h1 class="text-3xl font-bold mb-4 text-black">
中国科技创新助力"双碳"目标实现 打造绿色发展新优势
</h1>
<div class="flex items-center text-gray-600 mb-6 space-x-4">
<div class="flex items-center">
<el-icon><User /></el-icon>
<span class="ml-1">李明远</span>
</div>
<div class="flex items-center">
<el-icon><Clock /></el-icon>
<span class="ml-1">2024 年 1 月 15 日 14:30</span>
</div>
<div class="flex items-center">
<el-icon><View /></el-icon>
<span class="ml-1">阅读 2,387</span>
</div>
</div>
<div class="prose max-w-none">
<img
:src="mainImage"
alt="科技创新"
class="w-full h-[400px] object-cover object-center rounded-lg mb-6"
/>
<p class="text-lg leading-relaxed mb-4 text-black">
近日,国务院新闻办公室发布《中国应对气候变化的政策与行动》白皮书,全面介绍中国应对气候变化的最新政策措施、行动成效和基本立场。白皮书指出,中国将秉持人类命运共同体理念,为应对全球气候变化作出更大贡献。
</p>
<p class="text-lg leading-relaxed mb-4 text-black">
在"双碳"目标引领下,中国正在加快构建清洁低碳安全高效的能源体系。2023年前三季度,我国可再生能源发电装机规模持续扩大,光伏发电新增装机超过
8000 万千瓦,风电新增装机超过 2500 万千瓦。
</p>
<img
:src="contentImage1"
alt="可再生能源"
class="w-full h-[300px] object-cover object-center rounded-lg my-6"
/>
<p class="text-lg leading-relaxed mb-4 text-black">
科技创新在推动绿色低碳发展中发挥着关键作用。我国在氢能、储能、智能电网等领域取得重要突破,新型电力系统建设稳步推进,能源技术创新能力显著增强。
</p>
</div>
</div>
<!-- 右侧边栏 -->
<div class="space-y-6">
<!-- 热点新闻 -->
<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 hotNews"
:key="index"
class="group cursor-pointer"
@click="itemClicks(item.id)"
>
<div class="relative h-40 mb-2 overflow-hidden rounded-lg">
<img
:src="item.image"
:alt="item.title"
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"
>
{{ item.title }}
</h3>
<p class="text-sm text-gray-500">{{ item.date }}</p>
</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-blue-500 mr-2"><Location /></el-icon>
本地新闻
</h2>
<div class="space-y-4">
<div
v-for="(item, index) in localNews"
:key="index"
class="flex items-start space-x-3 group cursor-pointer"
@click="itemClicks(item.id)"
>
<div class="flex-shrink-0 w-20 h-20 overflow-hidden rounded">
<img
:src="item.image"
:alt="item.title"
class="w-full h-full object-cover object-center"
/>
</div>
<div>
<h3 class="text-sm font-medium group-hover:text-blue-600">
{{ item.title }}
</h3>
<p class="text-xs text-gray-500 mt-1">{{ item.date }}</p>
</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>
通知公告
</h2>
<div class="space-y-3">
<div
v-for="(notice, index) in notices"
:key="index"
class="flex items-center space-x-2 group cursor-pointer"
>
<el-icon><Document /></el-icon>
<span class="text-sm group-hover:text-blue-600">{{
notice.title
}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import {
User,
Clock,
View,
Star,
Location,
Bell,
Document,
ArrowRight,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
const mainImage =
"https://ai-public.mastergo.com/ai/img_res/fc0c8191fe99a188a31adcb3a2740d5c.jpg";
const contentImage1 =
"https://ai-public.mastergo.com/ai/img_res/fa798b4a2d6f1644a8e92055a99ebd18.jpg";
const hotNews = ref([
{
title: "新能源汽车产业链全面布局,本地企业创新发展提速",
image:
"https://ai-public.mastergo.com/ai/img_res/33a919df2dcf2f3a8273be6a047741d9.jpg",
date: "2024-01-15",
},
{
title: "智慧城市建设再添新章,5G 技术赋能城市治理",
image:
"https://ai-public.mastergo.com/ai/img_res/c88855fc16b1e5c2a4d2dc275b8160f2.jpg",
date: "2024-01-14",
},
]);
const localNews = ref([
{
title: "我市举办 2024 年科技创新成果展",
image:
"https://ai-public.mastergo.com/ai/img_res/e0c468c5b9241d5d19cadc683c030bbd.jpg",
date: "2024-01-15",
},
{
title: "本地高新技术企业突破 500 家",
image:
"https://ai-public.mastergo.com/ai/img_res/cb9da54c9a1ba3bdf71ba9abcf8cee40.jpg",
date: "2024-01-14",
},
{
title: "首届数字经济发展论坛成功举办",
image:
"https://ai-public.mastergo.com/ai/img_res/09e109cd6473f1976e4949acc619b480.jpg",
date: "2024-01-13",
},
]);
const notices = ref([
{
title: "关于组织申报 2024 年度科技创新项目的通知",
},
{
title: "2024 年第一季度高新技术企业认定工作启动",
},
{
title: "关于开展科技型中小企业评价工作的通知",
},
{
title: "2024 年科技创新券申领指南",
},
{
title: "关于征集科技创新政策建议的公告",
},
]);
function itemClicks(id: number) {
router.push({
path: "/home/newsdetail",
query: {
id: id,
},
});
}
</script>
<style scoped>
.prose img {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.prose p {
margin-bottom: 1.5rem;
line-height: 1.75;
}
</style>
<template>
<div class="min-h-screen bg-gray-50">
<div class="w-[1440px] mx-auto px-0 py-5">
<div class="flex items-center text-sm text-gray-500 mb-2">
<router-link
:to="toRoute()"
class="text-gray-500 hover:text-blue-500"
>{{ toRouteName() }}</router-link
>
<el-icon class="mx-2"><ArrowRight /></el-icon>
<span class="text-gray-900">新闻详情</span>
</div>
<!-- 主要内容区 -->
<div class="grid grid-cols-3 gap-8">
<!-- 左侧主要新闻内容 -->
<div class="col-span-2 bg-white rounded-lg shadow-sm p-6">
<h1 class="text-3xl font-bold mb-4 text-black">
{{ details.title }}
</h1>
<div class="flex items-center text-gray-600 mb-6 space-x-4">
<div class="flex items-center">
<el-icon><User /></el-icon>
<span class="ml-1">{{ details.author }}</span>
</div>
<div class="flex items-center">
<el-icon><Clock /></el-icon>
<span class="ml-1">{{ details.date }}</span>
</div>
<div class="flex items-center">
<el-icon><View /></el-icon>
<span class="ml-1">阅读 {{ details.hit }}</span>
</div>
</div>
<div v-html="details.content"></div>
</div>
<!-- 右侧边栏 -->
<div class="space-y-6">
<!-- 热点新闻 -->
<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 list1"
:key="index"
class="group cursor-pointer"
@click="goToDetail(item.id)"
>
<div 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"
>
{{ item.contentTitle }}
</h3>
<p class="text-sm text-gray-500">{{ item.contentDatetime }}</p>
</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 }}
</h2>
<div class="space-y-3">
<div
v-for="(item, index) in list2"
:key="index"
class="flex items-center space-x-2 group cursor-pointer"
@click="goToDetail(item.id)"
>
<el-icon><Document /></el-icon>
<span class="text-sm group-hover:text-blue-600">{{
item.contentTitle
}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";
import {
User,
Clock,
View,
Star,
Location,
Bell,
Document,
ArrowRight,
} from "@element-plus/icons-vue";
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 { getNewsList } from "@/api/home/news/list";
const route = useRoute();
const router = useRouter();
const details = ref({});
const list1 = ref([]);
const list2 = ref([]);
function toRouteName() {
switch (route.query.type) {
case "0":
return "首页";
case "1":
return "权威发布";
case "2":
return "辟谣专区";
case "3":
return "专家解读";
case "4":
return "法律法规";
case "5":
return "读图识谣";
}
}
function toRoute() {
switch (route.query.type) {
case "0":
return "/py/pyhome";
case "1":
return "/py/authority";
case "2":
return "/py/rumor";
case "3":
return "/py/expert";
case "4":
return "/py/law";
case "5":
return "/py/reading";
}
}
getList1(3, 1);
getList2(5, 1);
function getList1(pageSize: number, pageNo: number) {
const datas = {
contentType: route.query.type1,
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);
}
});
list1.value = rowsList;
});
}
function goToDetail(id: number) {
router.push({
path: "/py/news/detail",
query: {
type: route.query.type,
id: id,
},
});
}
//获取通知公告
function getList2(pageSize: number, pageNo: number) {
const datas = {
contentType: route.query.type2,
pageSize: pageSize,
pageNo: pageNo,
};
getNewsList(datas).then((response) => {
const data = response.data;
const rowsList = data.rows;
rowsList.forEach((item: any) => {
if (item.contentImg) {
item.images = baseImageUrl(JSON.parse(item.contentImg)[0].path);
}
});
list2.value = rowsList;
});
}
//统计点击数量
getHit(route.query.id);
const data = {
id: route.query.id,
};
// 监听数据变化
watch(
() => route.query.id,
(newVal, oldVal) => {
if (newVal) {
data.id = newVal;
getNewsDetail(data).then((res) => {
details.value = res.data;
console.log(details.value);
});
}
}
);
getNewsDetail(data).then((res) => {
details.value = res.data;
console.log(details.value);
});
</script>
<style scoped>
.prose img {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.prose p {
margin-bottom: 1.5rem;
line-height: 1.75;
}
</style>
<!-- 代码已包含 CSS:使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<!-- 首页 -->
<template>
<div class="mx-auto bg-gray-200">
<main class="container mx-auto px-8 py-8">
......@@ -51,7 +51,7 @@
</div>
<div class="grid grid-cols-3 gap-6">
<el-card
v-for="(section, index) in sections"
v-for="(section, index) in list1"
:key="index"
class="h-full"
>
......@@ -60,7 +60,9 @@
<span class="text-xl font-bold text-primary">{{
section.title
}}</span>
<el-button type="primary" text>更多 ></el-button>
<el-button type="primary" text @click="goToTyMoreList(index)"
>更多 ></el-button
>
</div>
</template>
<el-scrollbar height="400px">
......@@ -74,7 +76,7 @@
<el-link
:underline="false"
class="text-gray-700 hover:text-primary truncate"
>{{ item }}</el-link
>{{ item.contentTitle }}</el-link
>
</li>
</ul>
......@@ -130,6 +132,12 @@ import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/autoplay";
import "swiper/css/navigation";
import { getNewsList } from "@/api/home/news/list";
import { baseImageUrl, dtsy, zjjd, pyzq, flfg } from "@/utils/config";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const activeIndex = ref("0");
const swiperModules = [Pagination, Navigation, Autoplay];
const menuItems = [
......@@ -140,6 +148,46 @@ const menuItems = [
"法律法规",
"读图识谣",
];
//专家解读、辟谣专区、法律法规 更多
function goToTyMoreList(index: number) {
switch (index) {
case 0: //专家解读
router.push({
path: "/py/expert",
query: {
homeMoreType: "-1",
},
});
break;
case 1: //辟谣专区
router.push({
path: "/py/rumor",
query: {
homeMoreType: "-1",
},
});
break;
case 2: //法律法规
router.push({
path: "/py/law",
query: {
homeMoreType: "-1",
},
});
break;
}
}
// function getToDetail(section: any) {
// router.push({
// path: "/py/news/detail",
// query: {
// type: 5,
// id: id,
// },
// });
// }
const slides = [
{
src: "https://ai-public.mastergo.com/ai/img_res/a6c6b005094da8f76e79def3225b4ea0.jpg",
......@@ -160,51 +208,48 @@ const quickLinks = [
{ icon: Bell, title: "举报中心" },
{ icon: Collection, title: "知识库" },
];
const sections = [
const list1 = ref([
{
title: "专家解读",
items: [
"专家详解:新冠病毒变异株的特点与防护要点",
"权威专家谈饮食健康:科学认识营养补充剂",
"医学专家解读:常见慢性病的预防与管理",
"专家视角:解读最新公共卫生政策",
"心理健康专家:如何应对现代生活压力",
"环境卫生专家:空气污染与健康防护",
"运动医学专家:科学健身指南",
"营养学专家:平衡饮食的重要性",
"中医专家:传统养生之道的现代价值",
"公共卫生专家:群体免疫的科学认识",
],
items: [],
},
{
title: "辟谣专区",
items: [
"辟谣:喝热水可以预防新冠病毒感染?",
"谣言粉碎:5G基站会传播病毒",
"假新闻核实:某食品添加剂致癌?",
"事实核查:网传特效药可治百病",
"辟谣:转发朋友圈可以赚钱?",
"真相:某款保健品包治百病",
"谣言终结:吃某水果可预防癌症",
"揭秘:网传养生方法的科学依据",
],
items: [],
},
{
title: "法律法规",
items: [
"《中华人民共和国网络安全法》解读",
"《互联网信息服务管理办法》要点",
"《网络谣言治理规定》重点条款",
"《个人信息保护法》主要内容",
"《数据安全法》核心要义",
"《未成年人网络保护条例》解析",
"《网络信息内容生态治理规定》",
"《网络安全审查办法》要点",
"《互联网新闻信息服务管理规定》",
"《网络直播营销管理办法》解读",
],
items: [],
},
];
]);
getList(zjjd, 10, 1);
getList(pyzq, 10, 1);
getList(flfg, 10, 1);
//获取专家解读
function getList(value: string, pageSize: number, pageNo: number) {
const datas = {
contentType: value,
pageSize: pageSize,
pageNo: pageNo,
};
getNewsList(datas).then((response) => {
switch (value) {
case zjjd:
list1.value[0].items = response.data.rows;
break;
case pyzq:
list1.value[1].items = response.data.rows;
break;
case flfg:
list1.value[2].items = response.data.rows;
break;
}
});
}
const serviceCards = [
{
image:
......
......@@ -6,31 +6,33 @@
<!-- 分类卡片 -->
<div class="grid grid-cols-4 gap-6">
<div
v-for="(card, index) in displayedCards"
v-for="(card, index) in newsList"
:key="index"
class="bg-white rounded-lg shadow-lg p-6 transition-transform hover:scale-105"
>
<div class="h-48 w-full mb-4 overflow-hidden rounded-lg">
<img
:src="card.image"
:src="card.images"
class="w-full h-full object-cover object-top"
:alt="card.title"
/>
</div>
<h3 class="text-lg font-semibold mb-2 text-black">
{{ card.title }}
{{ card.contentTitle }}
</h3>
<p class="text-gray-600 text-sm">{{ card.description }}</p>
<p class="text-gray-600 text-sm">{{ card.contentDescription }}</p>
</div>
</div>
<!-- 分页器 -->
<div class="flex justify-center mt-8">
<el-pagination
v-model:current-page="currentPage"
:page-size="pageSize"
:total="categoryCards.length"
v-model:current-page="pageNo"
v-model:page-size="pageSize"
background
:total="total"
:page-sizes="[10, 20, 30, 40]"
layout="prev, pager, next"
@current-change="handlePageChange"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
......@@ -39,112 +41,55 @@
</template>
<script lang="ts" setup>
import { ref, computed } from "vue";
const currentPage = ref(1);
const pageSize = ref(20); // 5行 * 4列 = 20个卡片每页
const categoryCards = ref([
{
title: "健康科普讲堂",
description: "权威专家为您解读健康知识",
image:
"https://ai-public.mastergo.com/ai/img_res/6800ba6e6e9d58a5213dc35cf45aa935.jpg",
},
{
title: "食品安全专区",
description: "关注食品安全 守护健康生活",
image:
"https://ai-public.mastergo.com/ai/img_res/78f282fecb2ca46ce277f577524926de.jpg",
},
{
title: "网络安全知识",
description: "提高网络安全意识",
image:
"https://ai-public.mastergo.com/ai/img_res/bb7c7391590947d1b62c033101ceab1f.jpg",
},
{
title: "法律咨询服务",
description: "专业律师在线解答",
image:
"https://ai-public.mastergo.com/ai/img_res/08d0b1cfc3bcd904005904ec16e87573.jpg",
},
{
title: "医疗保健资讯",
description: "最新医疗动态与健康资讯",
image:
"https://ai-public.mastergo.com/ai/img_res/408a398536fdd6b6a1ee1833fd871af9.jpg",
},
{
title: "金融理财教育",
description: "理财知识普及与风险防范",
image:
"https://ai-public.mastergo.com/ai/img_res/09d3e310f9675431ec0f0b01930223bf.jpg",
},
{
title: "环境保护知识",
description: "关注环保 共建绿色家园",
image:
"https://ai-public.mastergo.com/ai/img_res/1b0f2097ceb49e335495ef6095572d4c.jpg",
},
{
title: "科技创新资讯",
description: "前沿科技动态解读",
image:
"https://ai-public.mastergo.com/ai/img_res/ec1abd62da14d0096ae77aa443cb22e8.jpg",
},
{
title: "教育培训专区",
description: "优质教育资源分享",
image:
"https://ai-public.mastergo.com/ai/img_res/7c7de0bf98bbf1ac35654cd1503ba162.jpg",
},
{
title: "消费者权益",
description: "维护消费者合法权益",
image:
"https://ai-public.mastergo.com/ai/img_res/f42618aed905f908d6bfbde74424ad96.jpg",
},
{
title: "心理健康咨询",
description: "专业心理疏导服务",
image:
"https://ai-public.mastergo.com/ai/img_res/c0e8ccc1760dc19341bb90378d5881e0.jpg",
},
{
title: "职业发展指导",
description: "职业规划与发展建议",
image:
"https://ai-public.mastergo.com/ai/img_res/8d9d7cff19219ee57277896ffe595daf.jpg",
},
{
title: "社会公益服务",
description: "传播正能量 服务社会",
image:
"https://ai-public.mastergo.com/ai/img_res/3624cecd0bd83bc1c7c42a4855ea86c4.jpg",
},
{
title: "文化艺术鉴赏",
description: "提升文化艺术素养",
image:
"https://ai-public.mastergo.com/ai/img_res/ec0d55c0836f437f63cb01abd4de66b6.jpg",
},
{
title: "旅游出行提醒",
description: "安全出行 精彩旅程",
image:
"https://ai-public.mastergo.com/ai/img_res/267be4f0ac5afd82e63d9d014910f868.jpg",
},
{
title: "家居生活指南",
description: "美好生活 从家开始",
image:
"https://ai-public.mastergo.com/ai/img_res/0d72b856588b033151967bb4c2630a15.jpg",
},
]);
const displayedCards = computed(() => {
const start = (currentPage.value - 1) * pageSize.value;
return categoryCards.value.slice(start, start + pageSize.value);
});
const handlePageChange = (val: number) => {
currentPage.value = val;
import { getNewsList } from "@/api/home/news/list";
import { baseImageUrl, dtsy } from "@/utils/config";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);
const newsList = ref([]);
const handleSizeChange = (val: number) => {
pageSize.value = val;
pageNo.value = pageNo.value;
};
const handleCurrentChange = (val: number) => {
pageSize.value = pageSize.value;
pageNo.value = val;
getList(pageSize.value, pageNo.value);
};
getList(10, 1);
//获取专家解读
function getList(pageSize: number, pageNo: number) {
const datas = {
contentType: dtsy,
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);
}
});
newsList.value = rowsList;
});
}
function getToDetail(id: number) {
router.push({
path: "/py/news/detail",
query: {
type: 5,
id: id,
},
});
}
</script>
<style scoped></style>
......@@ -2,11 +2,23 @@ import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import vueDevTools from "vite-plugin-vue-devtools";
// https://vite.dev/config/
export default defineConfig({
plugins: [vue(), vueDevTools()],
resolve: {
// https://cn.vitejs.dev/config/#resolve-alias
alias: {
// 设置路径
"~": path.resolve(__dirname, "./"),
// 设置别名
"@": path.resolve(__dirname, "./src"),
},
// https://cn.vitejs.dev/config/#resolve-extensions
extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
},
server: {
// 是否开启 https
https: false,
......@@ -15,17 +27,12 @@ export default defineConfig({
host: "0.0.0.0",
// 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy
proxy: {
"/api": {
"/cms": {
// target: "http://localhost:8081",
// target: "http://172.16.70.52:8081",
target: "http://192.168.19.247:8081",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
"/jeeplus": {
target: "ws://192.168.1.205:8081", // 线上服务器websocket地址
ws: true,
target: "http://192.168.19.142:9002",
changeOrigin: true,
// rewrite: (path) => path.replace(/^\/cms/, "/cms"),
},
},
cors: true,
......
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